Body height dependend screen resolution

Hello,

Is it possible to make the body ‘HEIGHT’ dependend of the screen resolution?
(I mean with height, the browser viewport which is (screen height - navigation bar height - webdeveloper toolbar - tab bar))

It is on this moment not clear to me what the difference is between:

  • window.innerHeight,
  • document.documentElement.clientHeight,
  • document.body.clientHeight
    (But I will find out.)

Example:
Navigation bar height = 20px
web developer toolbar = 15px
tab bar = 20 px;
Screen resolution = 1024 px.

Then I should like that the body height will be:
Body height = 1024 - 20 - 15 -20 = 969px

And if the screen resolution is 900 px
Body height = 900 - 20 - 15 -20 = 845px

Is that possible with CSS. Or is this possible in combination with javascript? Or is that the wrong road?

I want to realize that because I should like that my ‘full’ website is on the screen and make the content part lower or higher with overflow: auto;

Thanks in advance,

Nico

You can give an element position:absolute and then top/bottom coordinates and then the object will always be x pixels from the top and then x pixels from the bottom


#wrapper
{
  position:absolute;
  top:20px;/*always 20px from the top*/
  bottom:40px;/*always 40px from the bottom*/
}

IE6 will need an expression however :slight_smile:

Is that waht you meant?

No, it is not content wrapper or something like that. I talking about the body! To be sure I’ve test it, but nothing changes.
What I’m asking is that the body get always the height of the ‘viewport’ of the browser. (And I don’t know if I say it good but what I mean with the viewport of the browser is the browser area for the site in or other words screen height minus navigation bar minus tab bar minus …).

Because what do you mean by “bottom:40px:” of what for the body?

Nico

It’s impossible with CSS to change the viewport height (height of the browser) :). You would require scripting such as Javascript, however for security reasons, I believe they don’t let you mess with that :slight_smile:

You can however, make that 969px or 845px the height of hte content (which was what I was trying to explain above)

My code above will place an element (absolutely, out of the flow) 20px from the tpo of the containing block (the viewport if none set) and 40px from the bottom of the screen(if no containing block is set) :slight_smile:

Try it out, create a div and use my code (put a background on it to see)

Mess with the viewport height and notice how the box changes height with the viewport.

Sorry, but I don’t want to change anything of the browser like height.

What I want is to change the body height of my web page according to the screen resolution.
Let say if I have a screen resolution of 1400 x 900 px my body height should be:
900 minus the navigation bar height minus tabbar height, minus the development toolbar height).

I want to know the ‘netto viewport’ (or how do you call it) of the browser. If I read mozilla then it should be innerHeight. And how can I resize the body height to the innerHeight?

Nico

html {height:100%}
body {height:100%; overflow:auto}

Let say if I have a screen resolution of 1400 x 900 px my body height should be:
900 minus the navigation bar height minus tabbar height, minus the development toolbar height).

Thing is, your nav bar etc are inside the body… all your page is inside the body, and all the browser chrome (tab bar, dev toolbar) are always outside the page. So what Ryan is saying is, the body is maybe not the best element to be doing stuff like this… because the body is “bruto” and inclusief the nav etc. (actually you can think of html element as bruto but the body is practically bruto most of the time)

<html>
<body>
Everything that appears on the page itself… you cannot control browser chrome, that is for users to decide…
</body>
</html>
That’s always your whole page.

So for your netto you’d want another element.

What confused me is, usually the body is already, by default, 100% high and wide.

I mean, if I tile a background image on the body, I see it no matter how big or small my screen. Body just fills it. Body and html elements are maybe the only ones who do this, and it is possible to make the body less with code, but I guess I would like to see an image describing what you want. Seems like you want the colour or background image of the body to NOT be behind the nav?

Well, no, not really. Yes, the body element usually occupies the full width of the viewport (minus any default margins/padding in the user agent style sheet). But it normally extends vertically only as far as needed to enclose the document’s content.

But it normally extends vertically only as far as needed to enclose the document’s content.

Why do background images tiled on the body fill my viewport vertically then, instead of stopping after the document’s content like other elements do? I take that as meaning body is naturally being 100% high (maybe this is a natural 100% height of the html element, but then html is naturally 100% high).

Because,

Source: Colors and Backgrounds in the CSS2.1 specification.

user agents must instead use the computed value of the background properties from that element’s first HTML “BODY” element

this is different from the actual body element’s value?!??

*edit good lord it is… I thought I had this all tested out, but border: 5px solid #f00 shows otherwise…

back to the stomme poes, niet een slimme poes!

Yep. The difference is a bit esotheric, but it’s there. :slight_smile:

Oke, I’m further but I think the confusion is right and I think it is made by myself.
I thought I’ve to change the body height, but I can change my container (id=“maincontainer”) height and then I nearly reached my goal if realy should know the ‘netto view port’ height I think.

Here is my code:


<html>
  <body>
    <div id="maincontainer">
      .....
    </div>
  </body>
</html>

<script type="text/javascript">
document.getElementById('maincontainer').style.height = (document.documentElement.clientHeight-310 - 60) + 'px';
alert(document.getElementById('maincontainer').style.height);
</script>

explanation:
310 = header + sponsor height part.
60 = is the footer height + … browser bars of the browser? (my footer is far less then 60px heigh!).
But by subtracting the (310 + 60)px, the footer comes just above the status bar at the bottom of the browser.

But it is not possible to get just the netto view port of the browser or…

Thanks in advance.

Nico

Do you want a fixed footer, or something like that?

Or perhaps a sticky footer?

Apologize guys for all the confusion I have made.

But in all my simplicity I thought the maincontainer is inside the body. So if I make the body less height then my maincontainer is less height as well. But I understand now that was wrong thinking.

Maar Stomme poes ik heb nog wel een vraag in mijn 1e taal. Het ligt waarschijnlijk meer aan mij dan aan jou maar ik (wij) begrijp(en) niet goed wat je nu bedoeld met “…it’s easy to have trouble telling if some particular technique is what you want.”

But anyway, thanks all.

But it is not possible to get just the netto view port of the browser or…

I think instead, you might want to do what we do: we fake it.

I don’t know what this maincontainer has in it that people see, but you can make it LOOK like it fills “all remaining space” with trickery and deceit.

<html>
<body>
<div id=“maincontainer”>
<top sponsor stuff, 100% wide and a background colour so you can’t see maincontainer peeking out from behind it>

rest of the page…
</div>
<div id=“footer”>
footer
</div>
</body>
</html>

However this means you’d need to use the sticky footer as Ryan mentioned.

html, body {
height: 100%; /by setting this, you are able to make maincontainer 100% high/
}

#maincontainer {
min-height: 100%;
}

  • html #maincontainer {height: 100%;} /IE6 if you care about it/

So Maincontainer is now 100% high. That means you cannot add any top or bottom borders, margins or padding.

So your sponsor stuff can be inside maincontainer but you can make it LOOK like maincontainer begins after them… if maincontainer has a top border for example, instead give this to the bottom of the sponsor block. If the sponsor stuff has a background colour, nobody will see that maincontainer actually starts at the top of the page. They’ll only see it coming after the sponsor block.

Then the sticky footer, which basically makes the footer sit right on top of the bottom of maincontainer. The nadeel with sticky footers is you need to know the height. You can have an em-based height, but no dynamic heights.

Also then, some inner container inside mainconainter will have to have enough bottom padding to make room for this footer.

If maincontainer was to have a border or something on the “bottom” then, like the sponsor box, you would instead put this on the top of the footer.

sort of an example, the purplish area should be like your maincontainer

Though the footer there is not a sticky footer, but you can see what those do from Ryan’s links.

Hi,

Are you talking about something like this or [URL=“http://www.pmob.co.uk/temp/2scroll2.htm”]this or [URL=“http://www.pmob.co.uk/temp/one-scrollable-div.htm”]this which uses the method Ryan mentioned in the first reply.

Hello,

What I’ve seen helped me a lot. It is the first ‘this’ of Paul O’B where I’m looking for but tonight I don’t have much time. I will further look at in the weekend.

Thanks,

Nico

I told you the method Paul showed you just now in my first post in this thread but you said it wasn’t what you needed :). I’m a bit confused but it seems to be what you need so I’m glad for that :).

When you’re getting started in web design, esp in your 2nd/3rd/whatever language, it’s easy to have trouble telling if some particular technique is what you want.

I honestly couldn’t tell until I saw that screenshot/upload.

'k wens je veel sucess Nico… als je wat vragen hebt, vraag maar!