Jump to content

Multiple DIVs occupying 100% of window height


Ensjo
 Share

Recommended Posts

Hello, all. This is my inaugural post.I would like to split the window screen in 3 parts, occupying 60%, 20% and 20% of window height respectively. Here is my HTML code and tentative styling:

<html><head><style type="text/css">window, body { height: 100% }body {	background-color: maroon;	margin: 0px;}div {	border: 1px gray solid;	border-radius: 7px; /* Borders with rounded corners */	margin: 8px;	padding: 5px;}#d1 {	height: 60%;	color: black;	background-color: white;}#d2 {	height: 20%;	color: gray;	background-color: #FFFFCC;}#d3 {	height: 20%;	color: gray;	background-color: black;}</style></head><body><div id="d1">One</div><div id="d2">Two</div><div id="d3">Three</div></body></html>

PROBLEM: The "height" property of the DIVs determine the height of the CONTENT (i.e., the innermost) part of the box model. So, while the actual contents of the DIVs do indeed sum up to 100% of the window height, the PADDINGS, BORDERS and MARGINS heights are ADDED to that, and so the rendered page becomes LONGER than the window, causing part of the third DIV to flow off screen and the vertical window scrollbar to appear.CSS3 introduced box-sizing: border-box, but it stills doesn't include the margins. :)Any ideas?Thanks in advance.

Link to comment
Share on other sites

use relative units for margins, and take that into consideration when determining the over heights of your divs. Margins + paddings + borders all get counted, along with the space of the element itself.

Link to comment
Share on other sites

use relative units for margins, and take that into consideration when determining the over heights of your divs. Margins + paddings + borders all get counted, along with the space of the element itself.
Well, i calculated this:+--- (window top)|1% margin| +=== (1px border)| |1% padding| |56% content| |1% padding| +=== (1px border)|1% margin (two margins get collapsed into one)| +=== (1px border)| |1% padding| |17% content| |1% padding| +=== (1px border)|1% margin (two margins get collapsed into one)| +=== (1px border)| |1% padding| |17% content| |1% padding| +=== (1px border)|1% margin+--- (window bottom)All this sum up to 100% (+6 border pixels, which I left for the time being).Now my styling becomes:
<style type="text/css">window, body { height: 100% }body {	background-color: maroon;	margin: 0px;	padding: 0px;}div {	border: 1px gray solid;	border-radius: 7px; /* Borders with rounded corners */	margin: 1%;	padding: 1%;}#d1 {	height: 56%;	color: black;	background-color: white;}#d2 {	height: 17%;	color: gray;	background-color: #FFFFCC;}#d3 {	height: 17%;	color: gray;	background-color: black;}</style>

But the quest is not over yet. On Chrome (5.0.375.55), Opera (10.53) and FireFox (3.6), the page is STILL longer than the window, MUCH longer than the extra 6 border pixels that remained. On IE7, the page is SHORTER (the bottom border is about 3 times taller than the others).Weird... Why-oh-why does that happen? What now? :)

Link to comment
Share on other sites

well, adding pixels on top of 100% will of course go over 100%. What i was trying to say is you should just make them all %'s, so that way you know it adds up to 100%. But yeah, at the very least make sure everything validates to a Strict DTD. Do you have content in these div's?

Link to comment
Share on other sites

Are you using a Strict DTD? Does the page validate? (You can use the links in scientist's sig if the answer to either is no)
I marked up the file as XHTML1 strict and validated it:
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="pt-br" xml:lang="pt-br" xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Teste</title><style type="text/css">html {	height: 100%;}body {	height: 100%;	background-color: maroon;	margin: 0px;	padding: 0px;}div {	border: 1px gray solid;	border-radius: 7px; /* Borders with rounded corners */	margin: 1%;	padding: 1%;}#d1 {	height: 56%;	color: black;	background-color: white;}#d2 {	height: 17%;	color: gray;	background-color: #FFFFCC;}#d3 {	height: 17%;	color: gray;	background-color: black;}</style></head><body><div id="d1">One</div><div id="d2">Two</div><div id="d3">Three</div></body></html>

The only effect was that now IE7 behaves just like the other browsers: The content is longer than the window, and the vertical scrollbar appears.

Link to comment
Share on other sites

well, adding pixels on top of 100% will of course go over 100%. What i was trying to say is you should just make them all %'s, so that way you know it adds up to 100%.
Yes, I understood. I just left those 6 pixels to decide what to do later. Anyway, much more than just 6 pixels flow off the window.In fact, I realize now that as I resize the window, even if just horizontally, the VERTICAL dimensions of the DIVs are affected somewhat. At minimum window width, the DIVs don't get to fill the window. The more I widen the window, the higher the DIVs become, and soon they flow off window. That happens in all my browsers. Is that an expected behavior?! (Is it because the browsers try to keep the horizontal and vertical margins the same size?!)
But yeah, at the very least make sure everything validates to a Strict DTD.
Acomplished. See above.
Do you have content in these div's?
Just the "One", "Two", "Three" you see in the HTML code.
Link to comment
Share on other sites

Try specifying your margins individually instead of using the shorthand methods.Ex.margin-top: 1%;margin-bottom: 1%;margin-left: 1%;margin-right: 1%;It might be that when you call it out as margin: 1%; that 1% is figured from the same value (ie window width or height, whichever is greater).Edit: If the above, works you could try it as margin: 1% 1%; if you wanted to shorten your CSS

Edited by ShadowMage
Link to comment
Share on other sites

Try specifying your margins individually instead of using the shorthand methods.Ex.margin-top: 1%;margin-bottom: 1%;margin-left: 1%;margin-right: 1%;It might be that when you call it out as margin: 1%; that 1% is figured from the same value (ie window width or height, whichever is greater).Edit: If the above, works you could try it as margin: 1% 1%; if you wanted to shorten your CSS
I tried both ideas, the strange behaviour persists. :)
Link to comment
Share on other sites

I tried both ideas, the strange behaviour persists. :)
Maybe set fixed margins for your left and right (padding too, did you change the padding according to my last suggestion too? I forgot to mention it there) and let the top and bottom margins use %'s.
Link to comment
Share on other sites

have you considered line-height, i dont think font-size will be an issue here, i know margins are different within paragraphs in IE compared to others, this is why the only other posible extra height could come from is the line-height.
It's not clear to me what line-height could accomplish here. And to what element do you suggest me to apply line-height to, and what value to set? See my HTML code above. My three DIVs have nothing but the words "One", "Two" and "Three" in them, respectively.
Maybe set fixed margins for your left and right (padding too, did you change the padding according to my last suggestion too? I forgot to mention it there) and let the top and bottom margins use %'s.
Yes, as I said in my post above, I have used % in the paddings too.I just set left and right margins/paddings as fixed values (8px), but the top and bottom margins/paddings STILL stretch and shrink as I resize the window horizontally. Bizarre... :)
Link to comment
Share on other sites

It's not clear to me what line-height could accomplish here. And to what element do you suggest me to apply line-height to, and what value to set? See my HTML code above. My three DIVs have nothing but the words "One", "Two" and "Three" in them, respectively.Yes, as I said in my post above, I have used % in the paddings too.I just set left and right margins/paddings as fixed values (8px), but the top and bottom margins/paddings STILL stretch and shrink as I resize the window horizontally. Bizarre... :)
Bizarre indeed. Not a behavior I would expect, nor want.Anyway, with the line height you could set it universally for all elements. If you explicitly define a line-height then all browsers will render elements with that line-height. Otherwise different browsers could be applying different values to different elements.* { /*Universal selector*/line-height: 20px;}I set it to 20 but you could set it to whatever you want. See if it makes any difference. If it does, play around with the values to get the desired look.
Link to comment
Share on other sites

Well, I have come to a nice workaround! :) I used { position: absolute } for the DIVs, and set their top, bottom, left and right as %.The top, bottom, left and right set the limits of the MARGIN box, i.e., the OUTERMOST box of the box model. So I can use FIXED margin, border and padding sizes ad libitum, yay!And no weird stretching or shrinking as I resize the window.Check it out:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Teste</title><style type="text/css">html {	height: 100%;}body {	height: 100%;	background-color: maroon;	margin: 0px;	padding: 0px;}/* General settings for all content DIVs */.content {	border: 1px gray solid;	border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; /* Borders with rounded corners */	margin: 0px 8px 8px 8px;	padding: 5px;	position: absolute;	left: 0px;	right: 0px;}/* Specific settings for each content DIV. */#d1 {	top: 8px;	bottom: 40%;	color: black;	background-color: white;}#d2 {	top: 60%;	bottom: 20%;	color: gray;	background-color: #FFFFCC;}#d3 {	top: 80%;	bottom: 0%;	color: gray;	background-color: black;}</style></head><body><div id="d1" class="content">One</div><div id="d2" class="content">Two</div><div id="d3" class="content">Three</div></body></html>

Edited by Ensjo
Link to comment
Share on other sites

Absolute positioning should be used as a last resort, though it seems like that might be the case here. Unless one of the experts here on this forum happen across this post and can provide a better solutions.

Link to comment
Share on other sites

Absolute positioning should be used as a last resort, though it seems like that might be the case here. Unless one of the experts here on this forum happen across this post and can provide a better solutions.
W3C really should consider a more flexible way to define height/width with respect to the box model.It would be nice if I could use something like:#d1 { height: 60%; height-top: margin-box; height-bottom: margin-box;}#d2 { height: 20%; height-top: border-box; height-bottom: margin-box;}#d3 { height: 20%; height-top: border-box; height-bottom: margin-box;}Is there any channel to propose something like that?
Link to comment
Share on other sites

is there a way to see this all in action? do you have a link? The box model is pretty well established, so I think it will probably stay the way it is, because I'm not sure where you're trying to go with height-top: border box. :)but anyway, check this out, it should get you going in the right direction. its a good working example of 100% height with very simple markup.http://www.webmasterworld.com/forum83/200.htm

Edited by thescientist
Link to comment
Share on other sites

is there a way to see this all in action? do you have a link? The box model is pretty well established, so I think it will probably stay the way it is, because I'm not sure where you're trying to go with height-top: border box. :)
I think what he means is whether there is a way to specify that the whole element, in other words the box-model including margins, padding, etc, should be at a certain width. If you specify width: 300px; that doesn't include margins, padding, and borders, but he would like a way to specify that the box-model should be 300px. (Kinda like the way IE does it without a DTD)I agree that this could be useful in certain applications, for example when you want to have everything set at a proportion of the window, like the situation in this post.
Link to comment
Share on other sites

is there a way to see this all in action? do you have a link? The box model is pretty well established, so I think it will probably stay the way it is, because I'm not sure where you're trying to go with height-top: border box. :)
No, no link, just a thought I had now... The whole problem in this thread was caused by the fact { height: } only allows us to set the height of the CONTENT BOX of an element (or the border box, if we consider CSS3's new box-sizing: border-box option). At times, it would be interesting if stylers could set the height (or width) of the margin box or the padding box of an element, or even a "mix" of those... When I posted this hypothetical CSS(3? :)) code:{height: 20%;height-top: border-box;height-bottom: margin-box;}I was thinking of a way by which we could express: The height of the element, from the top of its border box to the bottom of its margin box, should be 20% of its container's height:+--------margin box|+---o---border box||+--|---padding box|||+-|---content box|||| .| <--- (I want THIS space to be 20% of the container's height.)|||+-|---content box||+--|---padding box|+---|---border box+----o---margin boxSo I wasn't thinking about changing the box model itself, but about new styling capabilities.
but anyway, check this out, it should get you going in the right direction. its a good working example of 100% height with very simple markup.http://www.webmasterworld.com/forum83/200.htm
Thank you. In fact, I have found that page in my researches before asking here. Thanks to it I knew that BODY should be styled as { height: 100% }. :)
Link to comment
Share on other sites

I think getcha. tbh, I haven't really looked much into new CSS3 stuff yet until I hear it becomes more of an (accepted) standard. Hopefully you'll get there with what's available.

Link to comment
Share on other sites

  • 3 weeks later...

This issue is what gets me too. I'm not really that into mixed capabilities, however, the ability to set the height including all space outside the content of an element, is what I am looking for too.We're limited to set only the content of an elment a certain height. If I wanted to set the complete element, and that is including the important margins, to 100% of the parent's space, the margins are not included in that percentage and are added on top of the full height. Still, I should be able to stretch an element to extend the full parent height and have a margin included there between both. In fact, the margin of the child has the same problem as the padding of the parent. You end up overflowing the parent or not having extra space beteen them.I am too having the scenario of proportions of the window. My "parent" should follow its size, without ugly script changing it almost but not real time.

Edited by Jack McKalling
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...