Html 如果我使用 HTML5 文档类型，为什么我不能使我的 div 高度为 100%？我如何得到它 100% 的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10871898/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why can't I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height
提问by Grezzo
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.
我正在为一个非常简单的图库 web 应用程序对布局进行排序，但是当我使用 HTML5 文档类型声明时，我的一些 div（100%）的高度会立即缩小，而且我似乎无法丰满他们使用 CSS 备份。
My HTML is at https://dl.dropbox.com/u/16178847/eyewitness/b/index.htmland css is at https://dl.dropbox.com/u/16178847/eyewitness/b/style.css
我的 HTML 在https://dl.dropbox.com/u/16178847/eyewitness/b/index.html和 css 在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.
- 如果我删除 HTML5 doctype 声明，一切都如我所愿，但我真的想使用正确的 HTML5 doctype 声明。
- 如果我将 doctype 设置为 HTML5 并且不做任何更改，则带有照片的 div 和页脚 div 不可见，大概是因为它们的高度为 0px。
- 如果我将 doctype 设置为 HTML5 并使
body { height: 100px }and.container { height: 100px }或.container { height: 100% }，它变得可见，但我需要的是它是全高而不是像素高度。 - 如果我尝试执行与上述相同的操作，但是
body { height: 100% }照片和页脚 div 不再可见。
What do I need to do to get it 100% in height so that my photo and footer divs are full height?
我需要做什么才能使其高度为 100%，以便我的照片和页脚 div 为全高？
回答by yunzen
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 htmlroot element.
仅当父元素具有定义的高度，即不是auto. 如果它有 100% 的高度，则也必须定义父级的父级高度。这可以持续到html根元素。
So set the height of the htmland the bodyelement to 100%, as well as every single ancestor element of that element that you wish to have the 100%heightin the first place.
因此，将html和body元素的高度设置为100%，以及您希望首先拥有的该元素的每个祖先元素100%height。
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% heightto—say htmlelement:
如果我不给 100%height以说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>… or .inner
… 或者 .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>回答by barraq
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>
回答by Nicholas Fernandes Paolillo
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%; heigh: 100%;}
Set the desired element like this:
像这样设置所需的元素：
.desired-element{ width: 100vw; heigh: 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
通过这种方式，您可以确保在宽度和高度上拥有 100% 的视口。vw 代表视图宽度，vh 代表视图高度
I hope this helps someone
我希望这可以帮助别人
