Welcome to WebmasterWorld Guest from 54.145.65.62

Forum Moderators: not2easy

Message Too Old, No Replies

100% height

     
8:39 pm on Dec 15, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Sept 8, 2006
posts:1232
votes: 0


ok, so i figured out how to set my colOne and colTwo to expand 100% in height based on content... well.. sort of...

i set:


html, body {height:100%;}

content-wrap {width:100%; height:100%;}

content {width:800px; margin: 0 auto; height: 100%; position:relative;}

colOne {float:left; position: absolute; width:550px; padding: 0px 10px 0px 0px; height: 100%;}

colTwo {position: relative: left: 570px; width:210px; padding: 0px 10px 0px 10px; height:100%;}

now, i would expect to have the two columns extend to the height of the content that is within them... right?

but what i see is that the page extends down about another 200px or so... so you have to scroll down to see the footer... but the content is not that far down...

what is happening? (both in IE and FF)

9:30 pm on Dec 15, 2008 (gmt 0)

Full Member

10+ Year Member

joined:June 12, 2003
posts:342
votes: 0


Try this.

BODY has a default margin that was pushing the content beyond the page. 100% is the total height of the window, including the margin area.

I added some color to the columns for visual reference.

html, body {height:100%; margin:0;}

#content-wrap {width:100%; height:100%;}

#content {width:800px; margin: 0 auto; height: 100%; position:relative; background:#FFFFFF;}

#colOne {float:left; position: absolute; width:550px; padding: 0px 10px 0px 10px; height: 100%; background:#FFFF33;}

#colTwo {position: relative; left: 570px; width:210px; padding: 0px 10px 0px 10px; height:100%; background:#333333;}

5:58 am on Dec 16, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Mar 18, 2007
posts:671
votes: 0


XtendScott means padding. Margins are not taken into account for element dimensions.

Also , note you floated an element while absolutely positioning it. It's probably not a problem, but realize it's not good code. Following the standards, you may not get what you are intending, since an element cannot be floated and positioned at the same time.

[w3.org...]

6:30 pm on Dec 16, 2008 (gmt 0)

Full Member

10+ Year Member

joined:June 12, 2003
posts:342
votes: 0


Xapti,

I did not modify the padding. The top margin of the BODY tag is what I found to be pushing the columns beyond the actual height of the visible browser area. Setting the margin:0; or margin-top:0; eliminated the issue.

"Margins are not taken into account for element dimensiions." - That is my understanding also, so 100% height would not subtract any margins on the element from its surrounding container. Thus the element height would be equal to the height of the container and would still be affected by any margins.