Why can't I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height
Only if the parent element has a defined height, i..e not a value of auto
. If that has 100% height, the parent's parent height must be defined, too. This could go until to the html
root element.
So set the height of the html
and the body
element to 100%
, as well as every single ancestor element of that element that you wish to have the 100%
height
in the first place.
See this example, to make it clearer:
html, body, .outer, .inner, .content {
height: 100%;
padding: 10px;
margin: 0;
background-color: rgba(255,0,0,.1);
box-sizing: border-box;
}
<div class="outer">
<div class="inner">
<div class="content">
Content
</div>
</div>
</div>
This wouldn't work, if I didn't give 100% height
to—say html
element:
body, .outer, .inner, .content {
height: 100%;
padding: 10px;
margin: 0;
background-color: rgba(255,0,0,.1);
box-sizing: border-box;
}
<div class="outer">
<div class="inner">
<div class="content">
Content
</div>
</div>
</div>
… or .inner
html, body, .outer, .content {
height: 100%;
padding: 10px;
margin: 0;
background-color: rgba(255,0,0,.1);
box-sizing: border-box;
}
<div class="outer">
<div class="inner">
<div class="content">
Content
</div>
</div>
</div>
Indeed, to make it work do as follow:
<!DOCTYPE html>
<html>
<head>
<title>Vertical Scrolling Demo</title>
<style>
html, body {
width: 100%;
height: 100%;
background: white;
margin:0;
padding:0;
}
.page {
min-height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="nav" class="page">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div id="page1" class="page">
<h1><a name="about">about</a></h1>
About page content goes here.
</div>
<div id="page2" class="page">
<h1><a name="portfolio">portfolio</a></h1>
Portfolio page content goes here.
</div>
<div id="page3" class="page">
<h1><a name="contact">contact</a></h1>
Contact page content goes here.
</div>
</body>
</html>
I got stuck into a similar problema to size a canvas, so here is what i did and worked perfectly.
Besides doing the:
body{ width: 100%; height: 100%;}
Set the desired element like this:
.desired-element{ width: 100vw; height: 100vh}
In that way you are assured to have 100% of the view port in width and height. vw stands for viewwidth and vh stands for viewheight
I hope this helps someone