html 元素如何仅使用 css 填充剩余屏幕高度的 100%？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7357818/
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
How can an html element fill out 100% of the remaining screen height, using css only?
提问by Harry
I have a header element and a content element:
我有一个标题元素和一个内容元素：
#header
#content
I want the header to be of fixed height and the content to fill up all the remaining height available on the screen, with overflow-y: scroll;.
我希望标题具有固定高度，并且内容填充屏幕上所有可用的剩余高度，使用overflow-y: scroll;.
It this possible without Javascript?
没有Javascript这可能吗？
采纳答案by BentOnCoding
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 元素上指定 100% 的高度。一些浏览器查看父元素（html、body）来计算高度。
<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;
}
回答by Sebastien H.
forget all the answers, this line of CSS worked for me in 2 seconds :
忘记所有答案，这行 CSS 在 2 秒内为我工作：
height:100vh;
1vh= 1% of browser screen height
1vh= 浏览器屏幕高度的 1%
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
[2018 年 11 月更新]正如评论中提到的，使用 min-height 可能会避免在响应式设计上出现问题
[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 -- vmaxis still not supported in IE, so this might not be the best solution for all yet.
[2018 年 4 月更新]正如评论中提到的，早在 2011 年提出问题时，并非所有浏览器都支持视口单位。其他答案是当时的解决方案 - vmaxIE 仍然不支持，所以这可能不是最好的解决方案。
回答by Faron
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.
从历史上看，与“宽度”相比，“高度”是最难塑造的。由于 css 专注于<body>样式的工作。我们给了-上面的代码<html>和<body>高度。这就是魔法出现的地方——因为我们在游戏桌上有“最小高度”，我们告诉浏览器它<body>优于浏览器，<html>因为它<body>拥有最小高度。这反过来又允许<body>覆盖，<html>因为<html>之前已经有了高度。换句话说，我们在欺骗浏览器“跳出”<html>桌面，这样我们就可以独立设计样式。
回答by Almeida Cavalcante
You can use vh on the min-height property.
您可以在 min-height 属性上使用 vh。
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
回答by dykstrad
The accepted solution will not actually work.
You will notice that the content divwill be equal to the height of its parent, body.
So setting the bodyheight to 100%will set it equal to the height of the browser window. Let's say the browser window was 768pxin height, by setting the content divheight to 100%, the div's height will in turn be 768px. Thus, you will end up with the header div being 150pxand the content div being 768px. In the end you will have content 150pxbelow the bottom of the page. For another solution, check out this link.
接受的解决方案实际上不起作用。您会注意到内容div将等于其父级的高度body. 因此，将body高度100%设置为等于浏览器窗口的高度。假设浏览器窗口768px的高度为 ，通过将内容div高度设置为100%，其div高度将依次为768px。因此，您最终将得到标题 div150px和内容 div 768px。最后，您将150px在页面底部下方看到内容。对于另一种解决方案，请查看此链接。
回答by Miguel
With HTML5 you can do this:
使用 HTML5，您可以这样做：
CSS:
CSS：
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}
HTML:
HTML：
<header>blabablalba </header>
<section> Content </section>
回答by hasher
For me, the next worked well:
对我来说，下一个效果很好：
I wrapped the header and the content on a div
我将标题和内容包裹在一个 div 上
<div class="main-wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>
I used this referenceto fill the height with flexbox. The CSS goes like this:
我使用这个参考来用 flexbox 填充高度。CSS 是这样的：
.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
有关 flexbox 技术的更多信息，请访问参考
回答by jumps4fun
The accepted answer does not work. And the highest voted answer does not answer the actual question. With a fixed pixel height header, and a filler in the remaining display of the browser, and scroll for owerflow. Here is a solution that actually works, using absolute positioning. I also assume that the height of the header is known, by the sound of "fixed header" in the question. I use 150px as an example here:
接受的答案不起作用。投票最高的答案并没有回答实际问题。使用固定像素高度的标题，并在浏览器的剩余显示中填充填充物，并滚动以获取流。这是一个实际有效的解决方案，使用绝对定位。我还假设标题的高度是已知的，通过问题中的“固定标题”的声音。我在这里以 150px 为例：
HTML:
HTML：
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
CSS:(adding background-color for visual effect only)
CSS:(添加背景颜色只是为了视觉效果）
#Header
{
height: 150px;
width: 100%;
background-color: #ddd;
}
#Content
{
position: absolute;
width: 100%;
top: 150px;
bottom: 0;
background-color: #aaa;
overflow-y: scroll;
}
For a more detailed look how this works, with actual content inside the #Content, have a look at this jsfiddle, using bootstrap rows and columns.
要更详细地了解它是如何工作的，在 里面有实际内容#Content，看看这个jsfiddle，使用引导行和列。
回答by Fezal halai
In this instance I want my main content div to be liquid height so that the whole page takes up 100% of the browser height.
在这种情况下，我希望我的主要内容 div 为液体高度，以便整个页面占据浏览器高度的 100%。
height: 100vh;
height: 100vh;
回答by tommymarshall
You can also set the parent to display: inline. See http://codepen.io/tommymarshall/pen/cECyH
您还可以将父级设置为display: inline. 见http://codepen.io/tommymarshall/pen/cECyH
Be sure to also have the height of html and body set to 100%, too.
确保也将 html 和 body 的高度设置为 100%。
