Menu
I have a sidebar DIV that i want to expand vertically to match its containing div.
I have done this to accomplish that
html, body, #wrapper, #content, #sidebar{
height:100%;
}
But the wrapper, content, and sidebar never expand past about 1000px, even when the content is several times that.
I believe this is because the content of #wrapper, #content are entirely floated DIVs.
I have tried to put empty DIVs with clear:both as the last element in #wrapper and #content, but to no avail.
<body>
<div id="wrapper">
<div id="footer">
</div>
<div id="sidebar">
</div>
<div id="content">
....
<div class="clear"/>
</div>
<div class="clear"/>
</div>
</body>
note: footer is fixed position
672
Height % is based on it's parent (so you have to set every element above the target element to 100%) , there are a few workarounds to this though. For instance you can set it to height: 100vh; This will create the element to be 100% of your window height. Or you can use px instead.
This is caused by the default margin being 8px so redefining it using CSS will correct it.
height: 100% gives the element 100% height of its parent container. height: auto means the element height will depend upon the height of its children.
the problem is you set 100% to html, body, and #wrapper, this forces their height to be their parents' height, #wrapper's parent is body, body's is html, what's html's parent? I'm not sure, i'm guessing the browser window (or its view port), if so, then #wrapper's height will always be equal to the browser window's height, so if your browser window's height is 1000px, then
#wrapper's height will always be 1000px, and because you set 100% to #sidebar and #content, their height will always be 1000px as well, despite the height of inner elements
if i was right, what you should do is set html's height separately, keep others' height to 100%, and set html's min-height to 100% and leave the height out. in theory, this will force html to be at least as high as the browser window, but expand when inner elements are higher than the browser, though i haven't tested it.
let me know if i was right or not.
Edit:I tested it, it works.
just do this:
html,
body{
min-height: 100%;
}
don't set the height, and make sure clear the floats and no absolute positioning on inner elements if you want the inner elements' height to be taken into account. Now the body will occupy the whole view port of the browser window when there are not enough elements to push it, and when there are, the body will expand to the very bottom of the page, not just the browser window.
tested it in chrome and should work in firefox, too
don't know about ie.
no, actaully, on a second test, it failed to work
it seems only when the parent has a given height (eg. height: 500px or height: 100%), the height: 100% will work; when the parent element has min-height: 100% and no height, the inner element can not use height: 100% to match the parent.
72
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
