Why can't I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height
Question
I am working on getting the layout sorted for a pretty simple gallery webapp, but when I use an HTML5 doctype declaration, the height of some of my divs (which were 100%) get shrunk right down, and I can't seem to plump them back up using CSS.
My HTML is at https://dl.dropbox.com/u/16178847/eyewitness/b/index.html and css is at https://dl.dropbox.com/u/16178847/eyewitness/b/style.css
- If I remove the HTML5 doctype declaration, all is as I want it to be, but I really want to use the proper HTML5 doctype declaration.
- If I set the doctype to HTML5 and make no changes, the div with the photo and the footer divs are not visible, presumably because they are 0px high.
- If I set the doctype to HTML5 and make the
body { height: 100px }and.container { height: 100px }or.container { height: 100% }, it becomes visible, but what I need is it to be is full height rather than a height in pixels. - If I try to do the same as above, but with the
body { height: 100% }the photo and footer divs are not visible again.
What do I need to do to get it 100% in height so that my photo and footer divs are full height?
3 answers
solution1
39 ACCPTED 2012-06-03 16:30:36
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>
solution2
7 2012-06-08 08:50:51
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>
solution3
2 2018-12-29 21:21:00
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
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.