Menu
height:100vh The . box class has only 100vh which is 100% of the viewport height. When you set the height to 100vh, the box element will stretch its height to the full height of the viewport regardless of its parent height.
Adding min-height:100% gives you the default height you want body to have and then allows the page dimensions to fill the viewport without content breaking out of the body. This works only because html has derived its 100% height based on the viewport.
Try pressing F11 versus pressing the button in the example to enter the fullscreen mode. Using F11 the entire page will be fullscreen mode, not just the element itself. The element's styles won't change. Clicking the button will promote the element itself into fullscreen mode, and the styles can be applied.
Answer: Set the 100% height for parents too And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.
forget all the answers, this line of CSS worked for me in 2 seconds :
height:100vh;
1vh = 1% of browser screen height
source
For responsive layout scaling, you might want to use :
min-height: 100vh
[update november 2018] As mentionned in the comments, using the min-height might avoid having issues on reponsive designs
[update april 2018] As mentioned in the comments, back in 2011 when the question was asked, not all browsers supported the viewport units.
The other answers were the solutions back then -- vmax is still not supported in IE, so this might not be the best solution for all yet.
The trick to this is specifying 100% height on the html and body elements. Some browsers look to the parent elements (html, body) to calculate the height.
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
html, body
{
height: 100%;
}
#Header
{
width: 960px;
height: 150px;
}
#Content
{
height: 100%;
width: 960px;
}
Actually the best approach is this:
html {
height:100%;
}
body {
min-height:100%;
}
This solves everything for me and it helps me to control my footer and it can have the fixed footer no matter if page is being scrolled down.
Technical Solution - EDITED
Historically, 'height' is tricky thing to mold with, compared to 'width', the easiest. Since css focus on <body> for styling to work. The code above - we gave <html> and <body> a height. This is where magic comes into picture - since we have 'min-height' on playing table, we are telling browser that <body> is superior over <html> because <body> holds the min-height. This in turn, allows <body> to override <html> because <html> had height already earlier. In other words, we are tricking browser to "bump" <html> off the table, so we could style independently.
You can use vh on the min-height property.
min-height: 100vh;
You can do as follows, depending on how you are using the margins...
min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element
The accepted solution will not actually work.
You will notice that the content div will be equal to the height of its parent, body.
So setting the body height to 100% will set it equal to the height of the browser window. Let's say the browser window was 768px in height, by setting the content div height to 100%, the div's height will in turn be 768px. Thus, you will end up with the header div being 150px and the content div being 768px. In the end you will have content 150px below the bottom of the page. For another solution, check out this link.
With HTML5 you can do this:
CSS:
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}
HTML:
<header>blabablalba </header>
<section> Content </section>
For me, the next worked well:
I wrapped the header and the content on a div
<div class="main-wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>
I used this reference to fill the height with flexbox. The CSS goes like this:
.main-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
flex: 1;
}
.content {
flex: 1;
}
For more info about the flexbox technique, visit the reference
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