Menu
I'm trying to make the <body> element take up at least 100% height of the browser window but also expand to any content. I'm also trying to make its only <div> child element take up 100% of the <body> height as well.
Illustration
This is what is currently happening; Case A is the problem, Case B works as expected.
In Case A, the div.page-content (red box) should expand to the body (blue box), but it does not.
Code
Here's what I have.
CSS
html {
height: 100%;
}
body {
min-height: 100%;
padding-top: 57px;
}
.page-content {
height: 100%;
}
Html
<html>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top"></nav>
<div class="page-content">
<div class="page-container"></div>
</div>
</body>
</html>
Note that the nav element is statically positioned and thus doesn't affect layout.
Body doesn't have a height specified because I want to height to be auto so it stretches to the content, but I don't want the height to be less than the browser window.
Body behaves as expected, it's the div.page-content that is only sizing to its own contents instead of stretching to the height of the body.
Is there a way to achieve the desired behavior without using javascript?
353
add overflow:visible; to body, change min-height:100%; to height:100%; for body and height:100%; to min-height:100%; for .page-content
96
skip page-content and use body as the main container, so you skip the inheritance trouble your are facing.
example
* {
box-sizing: border-box
}
html {
padding-top: 50px;
height: 100%;
background: white;
}
body {
min-height: 100%;
background: turquoise;
margin: 0 2em;
border:solid; /* see me */
}
nav {
position: fixed;
height: 50px;
top: 0;
left: 2em;
right: 2em;
background: tomato;
}<nav class="navbar navbar-inverse navbar-fixed-top"></nav>
<div class="page-container"></div>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
