将div设置为浏览器窗口的100％高度 [英] Make div 100% height of browser window
问题描述
我有一个有两列的布局 - 左边 div 和右边 div 。
右侧 div 有一个灰色的背景颜色根据用户浏览器窗口的高度垂直展开。现在 background-color 在 div 中的最后一个内容结束。
我尝试过 height：100％， min-height：100％
有几个相对较新的CSS3测量单位称为
视口百分比（或Viewport-相对）长度
什么是视口 - 百分比长度？
上面的链接W3候选建议：
视口百分比长度是相对于初始包含块的大小。
这些单位是 vh （viewport height）， vw （viewport width）， vmin （视口最小长度）和 vmax （视口最大长度）。
填充浏览器的高度？
对于这个问题，我们可以使用 vh ： 1vh 等于视口高度的1％。也就是说， 100vh 等于浏览器窗口的高度，而不管元素位于DOM树中的位置：
HTML
< div>< / div>
CSS
div {
height：100vh;
}
这就是所需要的。以下是使用中的 JSFiddle示例 。
什么浏览器支持这些新单元？
除了Opera Mini和Android Browser，所有最新的主要浏览器目前都支持。请查看我可以使用... 获得进一步的支持。
< h2>如何使用多个列？
在左边和右边分隔符的问题的情况下，这里有一个 JSFiddle示例，显示涉及 vh 和<$ c $的两列布局不同于
以此布局为例：
< body style =height：100％>
< div style =height：200px>
< p style =height：100％; display：block;> Hello，world！< / p&
< / div>
< / body>
此处的 p 标记设置为100 ％height，但是因为其包含 div 的高度为200px，200px的100％变为200px， 100％ body height。使用 100vh 代替 p 标签将是 code>无论 div 高度。请查看此随附的小提琴，以轻松查看差异！
vmin 和 vmax ？
是什么？ 1vmin 假设 1vh 和 1vw 。
1vmax 假定 1vh 和
特别适用于 font-size b
$ b
*请注意，这些CSS3单位在Firefox中可以动态运行，但其他浏览器需要刷新页面。
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 relatively new CSS3 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 and Android Browser. 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 to 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 200px height, 100% of 200px becomes 200px, 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 Fiddle to easily see the difference!
What exactly is vmin and vmax?
1vmin assumes a value of the smallest between 1vh and 1vw.
1vmax assumes a value of the largest between 1vh and 1vw.
Especially usable for font-size.
*Note that these CSS3 units work dynamically in Firefox, but other browsers require refreshing the page.
这篇关于将div设置为浏览器窗口的100％高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
