How can I make a div's height 100%
Question
I have a div containing a sidebar. I would like the sidebar's height to be 100% (of the parent div). For now it is only high as the content it has.
#parent {
height: 100%;
}
#sidebar {
height: 100%;
}
3 answers
solution1
0 2012-08-18 22:12:24
There are many possibilities to realise this.
The easiest way is to set the height of <html> and <body> to 100% .
HTML
<div id=parent>
<div id=sidebar></div>
</div>
CSS
html,body{height:100%}
#parent {
height: 100%;
background: #222 /* not needed */
}
#sidebar {
width: 200px; /* not needed */
height: 100%;
background: #444 /* not needed */
}
EDIT
overflow:auto fixes the problem too height content:
solution2
0 2012-08-18 22:17:32
Sorry 100% only apply to width does not apply to height you can try a jquery approach instead
html_height = $("#parent").height();
$('#sidebar').height(html_height);
with this unless you have a padding/margin on the side bar the height should be okay
solution3
0 ACCPTED 2012-08-18 22:55:26
When you set the height to 100%, it's 100% of what? The parent might be set to 100% but what quantity is that? While html is set to the height of the viewport, your parent div must be set to something with a set height in real numbers, or inherit it from its parent.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.