...

View Full Version : Forcing full page height



OurJud
06-07-2012, 04:52 PM
Hi, I'm currently converting a theme over to tumblr, but am having a problem ensuring the page height on permalink pages.

The permalink page height is set to 100%, but you can see from this example that if the 'content' area or post is short, the page isn't long enough for the links in the sidebar and they spill out into the background.

http://test71068.tumblr.com/post/24546451024/text

I can kind of fix it by changing the height from 100% to 1080px, but is this the correct way to fix the issue?

Thanks in advance.

Lerura
06-07-2012, 06:06 PM
The height of the <html> and <body> is by default what is needed to contain all elements and no more.
To make your page expand to the entire viewport.

html, body {height:100%}

Scott R
06-07-2012, 06:10 PM
Another thing you can do is make it a min-height. This will make the page always the height you put so it can cover the navigation on the left but it will also expand when you add more content to the main content area.

It Would look like this


<style type="text/css">
content(or whatever your div is for the content/nav area){
min-height:500px;
}


Alternativly, you could also seperate the nav from the content area and make it 2 seperate div areas. That way you can make the navigation background color and then have the main content areas background color and they wont conflict with different heights.

If you need more help just let me know. Hope this helped you out.

OurJud
06-07-2012, 06:30 PM
Thanks very much to you both. I'll have a look at both these solutions. If I don't return it can be presumed I found a satisfactory resolve.

Thanks again :)

[Update]

Well I thought setting the html/body to 100% had fixed it, until I checked this page. If you scroll down you will see that the image spills out of the content area.

http://test71068.tumblr.com/post/24547664363

There's also something going very wrong on this page too: http://test71068.tumblr.com/post/24610659141

My html/css knowledge is fairly limited, so I'm not really sure what's causing this.

[Update 2]

I've now established that adding 100% to the 'html' as well as 'body' causes the above problems, but if I remove it so that only 'body' has 100% defined, I'm back to where I was.

OurJud
06-07-2012, 08:32 PM
Please forgive me bumping this, but I fear it might get missed due to my original comment in the last post. I've since edited the last post when I discovered the suggested solutions didn't work.

I appreciate I should have tried the suggestions before I posted my reply.

Apostropartheid
06-07-2012, 09:03 PM
You've got to use min-height on html and body, not height. height will make it 100% all the time.

OurJud
06-07-2012, 09:24 PM
You've got to use min-height on html and body, not height. height will make it 100% all the time.

That still hasn't worked, as you can see from this page: http://test71068.tumblr.com/disclaimer

I'm looking for 100% page height regardless of the page's content.

I don't understand why adding a 100% height property to the html and body means that the background won't stretch with the main content area: http://test71068.tumblr.com/

It's the same on the permalink pages too: http://test71068.tumblr.com/post/24547696779 (scroll down)

If the post has notes it's even worse: http://test71068.tumblr.com/post/24610659141#notes-container

I just want the main body to be fixed to full page height at all times.

Apostropartheid
06-07-2012, 11:27 PM
Sorry, I hadn't read the entire thread.

http://peterned.home.xs4all.nl/examples/csslayout1.html Examine the CSS on this page and implement it, it should be just what you need.

OurJud
06-07-2012, 11:35 PM
Thanks, Apostropartheid, but incorporating that into my template is a little beyond my capabilities.

Lerura
06-07-2012, 11:41 PM
the CSS for you pages is:

body {
height: 100% !important;
background-color: #333;
font: normal 11px "Arial", Helvetica, Arial, sans-serif;
color: #333333;
margin: 0;
padding: 0 0 0;
}

The !important rule does not enforce a height of 100%.
It ensures that it overrides other settings of the same property elsewhere,if any.

If you haven't defined a height for the body elsewhere, then !important have absolutely no effect.

and you have only defined a height for the body , but not for the html

Change the above to:
html, body {
height: 100%;
}
body {

background-color: #333;
font: normal 11px "Arial", Helvetica, Arial, sans-serif;
color: #333333;
margin: 0;
padding: 0 0 0;
}

OurJud
06-07-2012, 11:49 PM
Lerura, I cannot thank you enough!! :D :thumbsup:

I was beginning to think I would never get that blog how I wanted, and I felt no one was understanding my insane ramblings.

The change to the html, body, and the way you separated them into their own styling elements has done the trick!!

I've checked all the different areas of the site and they seem to be behaving how I want so far.

Thank you, thank you, thank you!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum