CSS Div 拉伸 100% 页面高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/712689/
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
CSS Div stretch 100% page height
提问by Tom
I have a navigation bar on the left hand side of my page, and I want it to stretch to 100% of the page height. Not just the height of the viewport, but including the areas hidden until you scroll. I don't want to use javascript to accomplish this.
我的页面左侧有一个导航栏，我希望它拉伸到页面高度的 100%。不仅是视口的高度，还包括滚动之前隐藏的区域。我不想使用 javascript 来完成这个。
Can it be done in HTML/CSS?
可以在 HTML/CSS 中完成吗？
回答by Knyri
Here is the solution I finally came up with when using a div as a container for a dynamic background.
这是我在使用 div 作为动态背景的容器时最终想出的解决方案。
- Remove the
z-indexfor non-background uses. - Remove
leftorrightfor a full height column. - Remove
toporbottomfor a full width row.
- 删除
z-index用于非背景用途的 。 - 删除
left或right以获得全高列。 - 删除
top或bottom全宽行。
EDIT 1:CSS below has been edited because it did not show correctly in FF and Chrome. moved position:relativeto be on the HTML and set the body to height:100%instead of min-height:100%.
编辑 1：下面的 CSS 已被编辑，因为它在 FF 和 Chrome 中没有正确显示。移动position:relative到 HTML 并将正文设置为height:100%而不是min-height:100%.
EDIT 2:Added extra comments to CSS. Added some more instructions above.
编辑 2：向 CSS 添加了额外的注释。在上面添加了更多说明。
The CSS:
CSS：
html{
min-height:100%;/* make sure it is at least as tall as the viewport */
position:relative;
}
body{
height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1; /* Remove this line if it's not going to be a background! */
}
The html:
html：
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>
Why?
为什么？
html{min-height:100%;position:relative;}
Without this the cloud-container DIV is removed from the HTML's layout context. position: relativeensures that the DIV remains inside the HTML box when it is drawn so that bottom:0refers to the bottom of the HTML box. You can also use height:100%on the cloud-container as it now refers to the height of the HTML tag and not the viewport.
如果没有这个，云容器 DIV 将从 HTML 的布局上下文中删除。position: relative确保 DIV 在绘制时保留在 HTML 框中，以便bottom:0引用 HTML 框的底部。您还可以height:100%在云容器上使用，因为它现在指的是 HTML 标签的高度，而不是视口。
回答by alchuang
With HTML5, the easiest way is simply to do height: 100vh. Where 'vh' stands for viewport height of the browser window. Responsive to resizing of browser and mobile devices.
使用 HTML5，最简单的方法就是执行height: 100vh. 其中“vh”代表浏览器窗口的视口高度。响应调整浏览器和移动设备的大小。
回答by Nate Barr
I had a similar problem and the solution was to do this:
我有一个类似的问题，解决方案是这样做：
#cloud-container{
position:absolute;
top:0;
bottom:0;
}
I wanted a page-centered div with height 100% of page height, so my total solution was:
我想要一个高度为页面高度 100% 的以页面为中心的 div，所以我的总解决方案是：
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width: XXXpx; /*otherwise div defaults to page width*/
margin: 0 auto; /*horizontally centers div*/
}
You might need to make a parent element (or simply 'body') have position: relative;
您可能需要使父元素（或简称为“body”）具有 position: relative;
回答by Ryan Doherty
You can cheat using Faux ColumnsOr you can use some CSS trickery
你可以使用Faux Columns作弊 或者你可以使用一些CSS 技巧
回答by Aaron Digulla
It's simple using a table:
使用表格很简单：
<html>
<head>
<title>100% Height test</title>
</head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody>
<tr>
<td>Nav area</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid green;">Content blabla... text
<br /> text
<br /> text
<br /> text
<br />
</div>
</body>
</html>
When DIV was introduced, people were so afraid of tables that the poor DIV became the metaphorical hammer.
当 DIV 被引入时，人们非常害怕桌子，以至于可怜的 DIV 成为了比喻的锤子。
回答by tstanis
Use position absolute. Note that this isn't how we are generally used to using position absolute which requires manually laying things out or having floating dialogs. This will automatically stretch when you resize the window or the content. I believe that this requires standards mode but will work in IE6 and above.
使用绝对位置。请注意，这不是我们通常习惯使用绝对位置的方式，后者需要手动布置事物或具有浮动对话框。当您调整窗口或内容大小时，这将自动拉伸。我相信这需要标准模式，但可以在 IE6 及更高版本中使用。
Just replace the div with id 'thecontent' with your content (the specified height there is just for illustration, you don't have to specify a height on the actual content.
只需将 id 'thecontent' 的 div 替换为您的内容（指定的高度仅用于说明，您不必在实际内容上指定高度。
<div style="position: relative; width: 100%;">
<div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
<div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
<div style="height: 10000px;" id="thecontent"></div>
</div>
</div>
The way that this works is that the outer div acts as a reference point for the nav bar. The outer div is stretched out by the content of the 'content' div. The nav bar uses absolute positioning to stretch itself out to the height of its parent. For the horizontal alignment we make the content div offset itself by the same width of the navbar.
其工作方式是外部 div 充当导航栏的参考点。外部 div 被“内容”div 的内容拉长。导航栏使用绝对定位将自身伸展到其父级的高度。对于水平对齐，我们使内容 div 自身偏移导航栏的相同宽度。
This is made much easier with CSS3 flex box model, but that's not available in IE yet and has some of it's own quirks.
CSS3 弹性盒模型使这变得更容易，但它在 IE 中尚不可用，并且有一些它自己的怪癖。
回答by Talha
I ran into the same problem as you. I wanted to make a DIVas background, why, because its easy to manipulate div through javascript. Anyways three things I did in the css for that div.
我遇到了和你一样的问题。我想制作一个DIV作为背景，为什么，因为它很容易通过javascript操作div。无论如何，我在该 div 的 css 中做了三件事。
CSS:
CSS：
{
position:absolute;
display:block;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;
}
回答by Adam Boostani
If you are targeting more modern browsers, life can be very simple. try:
如果您的目标是更现代的浏览器，生活会非常简单。尝试：
.elem{
height: 100vh;
}
if you need it at 50% of the page, replace 100 with 50.
如果您需要在页面的 50% 处使用它，请将 100 替换为 50。
回答by Chong Chern Dong
I want to cover the whole web page before prompting a modal popup. I tried many methods using CSS and Javascript but none of them help until I figure out the following solution. It works for me, I hope it helps you too.
我想在提示模式弹出窗口之前覆盖整个网页。我尝试了许多使用 CSS 和 Javascript 的方法，但在找到以下解决方案之前，它们都没有帮助。它对我有用，我希望它也能帮助你。
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0px 0px;
height 100%;
}
div.full-page {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity:0.8;
overflow-y: hidden;
overflow-x: hidden;
}
div.full-page div.avoid-content-highlight {
position: relative;
width: 100%;
height: 100%;
}
div.modal-popup {
position: fixed;
top: 20%;
bottom: 20%;
left: 30%;
right: 30%;
background-color: #FFF;
border: 1px solid #000;
}
</style>
<script>
// Polling for the sake of my intern tests
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
isReady();
}
}, 1000);
function isReady() {
document.getElementById('btn1').disabled = false;
document.getElementById('btn2').disabled = false;
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function promptModalPopup() {
document.getElementById("div1").style.visibility = 'visible';
document.getElementById("div2").style.visibility = 'visible';
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function closeModalPopup() {
document.getElementById("div2").style.visibility = 'hidden';
document.getElementById("div1").style.visibility = 'hidden';
// enable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'scroll';
}
</script>
</head>
<body id="body">
<div id="div1" class="full-page">
<div class="avoid-content-highlight">
</div>
</div>
<button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>
<div id="demo">
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
</div>
<div id="div2" class="modal-popup">
I am on top of all other containers
<button id="btn2" onclick="closeModalPopup()" disabled>Close</button>
<div>
</body>
</html>Good luck ;-)
祝你好运 ;-）
回答by Swadesh Behera
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
