Html 如何使浏览器窗口的 div 高度为 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1575141/
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 to make a div 100% height of the browser window
提问by mike
I have a layout with two columns - a left divand a right div.
我有一个包含两列的布局 - 一个 leftdiv和一个 right div。
The right divhas a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Right now the background-colorends at the last piece of content in that div.
右边div有一个灰色background-color，我需要它根据用户浏览器窗口的高度垂直扩展。现在background-color结束在最后一段内容div。
I've tried height:100%, min-height:100%;, etc.
我试过height:100%，min-height:100%;等
回答by James Donnelly
There are a couple of CSS 3 measurement units called:
有几个 CSS 3 度量单位称为：
Viewport-Percentage (or Viewport-Relative)Lengths
视口百分比（或视口相对）长度
What are Viewport-Percentage Lengths?
什么是视口百分比长度？
From the linked W3 Candidate Recommendation above:
来自上面链接的 W3 候选推荐：
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。
These units are vh(viewport height), vw(viewport width), vmin(viewport minimum length) and vmax(viewport maximum length).
这些单位是vh（视口高度）、vw（视口宽度）、vmin（视口最小长度）和vmax（视口最大长度）。
How can this be used to make a divider fill the height of the browser?
这如何用于使分隔符填充浏览器的高度？
For this question, we can make use of vh: 1vhis equal to 1% of the viewport's height. That is to say, 100vhis equal to the height of the browser window, regardless of where the element is situated in the DOM tree:
对于这个问题，我们可以使用vh:1vh等于视口高度的 1%。也就是说，100vh等于浏览器窗口的高度，而不管元素在DOM树中的位置：
HTML
HTML
<div></div>
CSS
CSS
div {
height: 100vh;
}
This is literally all that's needed. Here is a JSFiddle exampleof this in use.
这实际上就是所需要的。这是一个使用中的JSFiddle 示例。
What browsers support these new units?
哪些浏览器支持这些新单位？
This is currently supported on all up-to-date major browsers apart from Opera Mini. Check out Can I use...for further support.
目前，除 Opera Mini 外，所有最新的主要浏览器都支持此功能。查看Can I use...以获得进一步的支持。
How can this be used with multiple columns?
这如何与多列一起使用？
In the case of the question at hand, featuring a left and a right divider, here is a JSFiddle exampleshowing a two-column layout involving both vhand vw.
在手头的问题的情况下，具有左右分隔符，这是一个JSFiddle 示例，显示了包含vh和的两列布局vw。
How is 100vhdifferent to 100%?
如何为100vh不同的到100%？
Take this layout for example:
以这个布局为例：
<body style="height:100%">
<div style="height:200px">
<p style="height:100%; display:block;">Hello, world!</p>
</div>
</body>
The ptag here is set to 100% height, but because its containing divhas 200 pixels height, 100% of 200 pixels becomes 200 pixels, not100% of the bodyheight. Using 100vhinstead means that the ptag will be 100% height of the bodyregardless of the divheight. Take a look at this accompanying JSFiddleto easily see the difference!
p此处的标签设置为 100% 高度，但由于其包含的div高度为 200 像素，因此 200 像素的 100% 变为 200 像素，而不是body高度的100% 。使用100vh代替意味着p标签将是 100% 的高度，而body不管div高度。看看这个随附的 JSFiddle可以轻松看出区别！
回答by Ariona Rian
If you want to set the height of a <div>or any element, you should set the height of <body>and <html>to 100% too. Then you can set the height of element with 100% :)
如果要设置 a<div>或任何元素的高度，也应将<body>和的高度设置<html>为 100%。然后你可以用 100% 设置元素的高度:)
Here is an example:
下面是一个例子：
body, html {
height: 100%;
}
#right {
height: 100%;
}
回答by Tinister
If you're able to absolutely position your elements,
如果你能够绝对定位你的元素，
position: absolute;
top: 0;
bottom: 0;
would do it.
会做的。
回答by MrGeek
You can use the view-port unit in CSS:
您可以在 CSS 中使用视口单元：
HTML:
HTML：
<div id="my-div">Hello World!</div>
CSS:
CSS：
#my-div {
height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
}
回答by Alireza
You can use vhin this case which is relative to 1% of the heightof the viewport...
vh在这种情况下，您可以使用相对于视口高度的1%...
That means if you want to cover off the height, just simply use 100vh.
这意味着如果你想掩盖高度，只需简单地使用100vh.
Look at the image below I draw for you here:
看看我在这里为你画的下图：
Try the snippet I created for you as below:
试试我为你创建的片段，如下所示：
.left {
height: 100vh;
width: 50%;
background-color: grey;
float: left;
}
.right {
height: 100vh;
width: 50%;
background-color: red;
float: right;
}<div class="left"></div>
<div class="right"></div>回答by Airen
All the other solutions, including the top-voted one with vhare sub-optimal when compared to the flex modelsolution.
vh与flex 模型解决方案相比，所有其他解决方案，包括投票最高的解决方案，都是次优的。
With the advent of the CSS flex model, solving the 100% height problem becomes very, very easy: use height: 100%; display: flexon the parent, and flex: 1on the child elements. They'll automatically take up all the available space in their container.
随着CSS flex 模型的出现，解决 100% 高度问题变得非常非常容易：height: 100%; display: flex在父flex: 1元素和子元素上使用。它们会自动占用容器中的所有可用空间。
Note how simple the markup and the CSS are. No table hacks or anything.
请注意标记和 CSS 是多么简单。没有桌子黑客或任何东西。
The flex model is supported by all major browsersas well as IE11+.
html, body {
height: 100%;
}
body {
display: flex;
}
.left, .right {
flex: 1;
}
.left {
background: orange;
}
.right {
background: cyan;
}<div class="left">left</div>
<div class="right">right</div>Learn more about the flex modelhere.
在此处了解有关flex 模型的更多信息。
回答by cletus
You don't mention a few important details like:
你没有提到一些重要的细节，比如：
- Is the layout fixed width?
- Are either or both of the columns fixed width?
- 布局是固定宽度吗？
- 列中的一个或两个是固定宽度吗？
Here's one possibility:
这是一种可能性：
body,
div {
margin: 0;
border: 0 none;
padding: 0;
}
html,
body,
#wrapper,
#left,
#right {
height: 100%;
min-height: 100%;
}
#wrapper {
margin: 0 auto;
overflow: hidden;
width: 960px; // width optional
}
#left {
background: yellow;
float: left;
width: 360px; // width optional but recommended
}
#right {
background: grey;
margin-left: 360px; // must agree with previous width
}<html>
<head>
<title>Example</title>
</head>
<body>
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right"></div>
</div>
</body>
</html>There are many variations on this depending on which columns need to be fixed and which are liquid. You can do this with absolute positioning too but I've generally found better results (particularly in terms of cross-browser) using floats instead.
这取决于哪些柱需要固定，哪些是液体，这有很多变化。您也可以使用绝对定位来做到这一点，但我通常发现使用浮点数会获得更好的结果（尤其是在跨浏览器方面）。
回答by Majda
This is what worked for me:
这对我有用：
<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>Use position:fixedinstead of position:absolute, that way even if you scroll down the division will expand to the end of the screen.
使用position:fixed代替position:absolute，这样即使向下滚动分区也会扩展到屏幕的末尾。
回答by Jonas Sandstedt
Here's a fix for the height.
这是高度的修复。
In your CSS use:
在您的 CSS 中使用：
#your-object: height: 100vh;
For browser that don't support vh-units, use modernizr.
对于不支持 的浏览器，请vh-units使用 Modernizr。
Add this script (to add detection for vh-units)
添加此脚本（添加检测vh-units）
// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
var bool;
Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {
var height = parseInt(window.innerHeight/2,10),
compStyle = parseInt((window.getComputedStyle ?
getComputedStyle(elem, null) :
elem.currentStyle)["height"],10);
bool= !!(compStyle == height);
});
return bool;
});
Finally use this function to add the height of the viewport to #your-objectif the browser doesn't support vh-units:
#your-object如果浏览器不支持，最后使用此函数将视口的高度添加到vh-units：
$(function() {
if (!Modernizr.cssvhunit) {
var windowH = $(window).height();
$('#your-object').css({'height':($(window).height())+'px'});
}
});
回答by Dinesh Pandiyan
100%works differently for width and height.
100%宽度和高度的工作方式不同。
When you specify width: 100%, it means "take up 100% of the available width from the parent element or width of the window."
当您指定 时width: 100%，它的意思是“从父元素或窗口的宽度中占用 100% 的可用宽度”。
When you specify height: 100%, it only means "take up 100% of available height from the parent element." This means if you don't specify a height at a top level element, the height of all the children will be either 0or height of the parent, and that is why you need to set the topmost element to have a min-heightof window height.
当您指定 时height: 100%，它仅表示“占用父元素可用高度的 100%”。这意味着如果您没有在顶层元素指定高度，则所有子元素的高度将是0父元素的高度或高度，这就是为什么您需要将最顶层元素设置为具有min-height窗口高度的原因。
I always specify the body to have a min-height of 100vh and it makes positioning and calculations easy,
我总是指定 body 的最小高度为 100vh，它使定位和计算变得容易，
body {
min-height: 100vh;
}
