Welcome to WebmasterWorld Guest from 54.145.209.107

Forum Moderators: not2easy

100% height div positioning

   
5:00 pm on Apr 3, 2009 (gmt 0)

5+ Year Member



I'm having trouble with something that seems pretty simple. I have a div that is 100% height, and it works fine except that since it is absolutely positioned down, it is pushing the parent container down too. Basically it is getting its height from the parent and then adding space because of the positioning...

Here's the css:


body, html {height:100%}
#container {width:800px; height:100%; min-height:100%; margin: 0 auto; position: relative; background-color:#fff;}
#sidebar {height:100%; width:277px; position:absolute; top:157px; left:523px}

and the basic html:

<div id="container">
<div id="sidebar"></div>
</div>

is there a simple solution to this? Sidebar needs to get its height from container (as far as I can tell) but also needs to be positioned within the container.

thanks!

12:50 am on Apr 4, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Try:
- removing the height: 100% from the #container
- removing the height: 100% from the #sidebar
- add bottom:0 to sidebar

This won't work in legacy IE versions natively (it lacks support for settign both top and bottom at the same time, but e.g. IE7.js fixes it.

2:00 am on Apr 4, 2009 (gmt 0)

5+ Year Member



hmm that works... I guess sidebar is stretching the container as well so I don't need the height declaration there anymore.

but no luck for older browsers, huh? it doesn't even work in IE7? bummer.

I did find a workaround... instead of setting top I added a freaking spacer.gif. oh the shame! curse you IE for making me add 4k to my site! >:(

4:11 pm on Apr 4, 2009 (gmt 0)

5+ Year Member



ran into another problem. if the content in a div inside the container is more than 100% height, the container doesn't stretch with it. so my white bg is gone and everything looks funky when you scroll down.

content div has css like this: #words {height:auto; width:425px; position:absolute; top:256px; left:86px;}

is there a way to make the container div 100% height and also stretch as needed?

9:05 pm on Apr 4, 2009 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



min-height?
9:08 pm on Apr 4, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



You cannot stretch your container with absolutely positioned elements.

Absolute positioning removes the element from the flow, it will not affect how its parent nor its siblings are displayed.

I have the impression you use a bit too much absolute positioning (it works and you can do various things with it, don't get discouraged from using it, but for creating columns that stretch a parent, it's just not the right choice.

Instead I'd add a column, float it to one side and make sure the parent "clears" it (either with a clearfix, or either with an element that has the clear property. That should stretch your element.

min-height: 100% can be used to make an element at least as high as it's direct parent, provided the parent has an explicitly set height (different from auto, which is the default) [So o get something at least as high as the viewport, you need:
- min-height: 100% on the element
- height: 100% on ALL parents (including html and body)
- the children of the element need to remain in the flow and need to be cleared if floated so they stretch the element as needed.

Take care with applying padding, margins and borders as they will be added to the 100%, creating elements that are larger than what you need.

2:00 am on Apr 5, 2009 (gmt 0)

5+ Year Member



thanks!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month