homepage Welcome to WebmasterWorld Guest from 54.204.64.152
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
100% height div positioning
trick




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

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!

 

swa66




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

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.

trick




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

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! >:(

trick




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

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?

SuzyUK




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

min-height?

swa66




msg:3885557
 9:08 pm on Apr 4, 2009 (gmt 0)

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.

trick




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

thanks!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved