如何使浏览器窗口的 div 高度为 100% [英] How to make a div 100% height of the browser window
问题描述
我有一个包含两列的布局 - 左侧 div 和右侧 div.
右边的 div 有一个灰色的 background-color，我需要它根据用户浏览器窗口的高度垂直扩展.现在 background-color 在那个 div 中的最后一段内容结束.
我试过height:100%、min-height:100%;等
有几个 CSS 3 度量单位称为:
视口百分比(或视口-相对) 长度
什么是视口百分比长度?
来自上面链接的 W3 候选推荐:
<块引用>视口百分比长度与初始包含块的大小有关.当初始包含块的高度或宽度发生变化时，它们会相应地缩放.
这些单位是 vh(视口高度)、vw(视口宽度)、vmin(视口最小长度)和 vmax(视口最大长度).
如何使用它来使分隔线填充浏览器的高度?
对于这个问题，我们可以使用vh:1vh 等于视口高度的1%.也就是说，100vh 等于浏览器窗口的高度，而不管元素在 DOM 树中的位置:
HTML
<div></div>CSS
div {高度:100vh；}这实际上就是所需要的.这是使用中的 JSFiddle 示例.
哪些浏览器支持这些新单元?
除 Opera Mini 外，目前所有最新的主要浏览器都支持此功能.查看我可以使用...以获得进一步的支持.
这如何用于多列?
就手头的问题而言，具有左右分隔符，这里是 JSFiddle示例 显示了包含 vh 和 vw 的两列布局.
100vh 和 100% 有什么不同?
以这个布局为例:
<div style="height: 200px"><p style="高度:100%；display: block;>你好，世界！</p>这里的 p 标签设置为 100% 高度，但是因为它包含的 div 有 200 像素的高度，所以 200 像素的 100% 变成了 200 像素，不是 body 高度的 100%.改用 100vh 意味着 p 标签将是 body 的 100% 高度，而不管 div 的高度如何.看看这个伴随JSFiddle，轻松看出区别！
I have a layout with two columns - a left div and a right div.
The right div has 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-color ends at the last piece of content in that div.
I've tried height:100%, min-height:100%;, etc.
There are a couple of CSS 3 measurement units called:
Viewport-Percentage (or Viewport-Relative) Lengths
What are Viewport-Percentage Lengths?
From the linked W3 Candidate Recommendation above:
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).
How can this be used to make a divider fill the height of the browser?
For this question, we can make use of vh: 1vh is equal to 1% of the viewport's height. That is to say, 100vh is equal to the height of the browser window, regardless of where the element is situated in the DOM tree:
HTML
<div></div>
CSS
div {
height: 100vh;
}
This is literally all that's needed. Here is a JSFiddle example of this in use.
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.
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 example showing a two-column layout involving both vh and vw.
How is 100vh different from 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 p tag here is set to 100% height, but because its containing div has 200 pixels height, 100% of 200 pixels becomes 200 pixels, not 100% of the body height. Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height. Take a look at this accompanying JSFiddle to easily see the difference!
这篇关于如何使浏览器窗口的 div 高度为 100%的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
