Welcome to WebmasterWorld Guest from 54.166.152.121

Forum Moderators: not2easy

Message Too Old, No Replies

100% height

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

WebmasterWorld Senior Member 5+ Year Member



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)

10+ Year Member



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)

WebmasterWorld Senior Member 5+ Year Member



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)

10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month