问题

我有一个布局有两列 - 左 div 和右 div .

右侧 div 有一个灰色的背景颜色,我需要它根据用户浏览器窗口的高度垂直展开.现在 background-color div 中的最后一段内容结束.

我尝试过 height:100%, min-height:100%;



解决方法

有两个相对较新的CSS3测量单位,称为

Viewport-Percentage (or Viewport-Relative) Lengths

What are Viewport-Percentage Lengths?

从上述的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.

这些单位是 vh (viewport height), vw (viewport width), vmin (viewport minimum length)and vmax (视口最大长度).

How can this be used to make a divider fill the height of the browser?

对于这个问题,我们可以使用 vh : 1vh 等于视口高度的1%.也就是说,无论元素位于DOM树中的什么位置, 100vh 都等于浏览器窗口的高度:

HTML

<div></div>

CSS

div {
    height:100vh;
}

这确实是所有需要的.以下是使用中的 JSFiddle示例 .

What browsers support these new units?

除了Opera Mini和Android Browser之外,目前支持所有最新的主要浏览器.请查看我可以使用... 获得进一步的支持.

How can this be used with multiple columns?

如果是左边和右边分隔线的问题,这里有一个 JSFiddle示例显示了涉及 vh vw 的两列布局.

How is 100vh different to 100%?

以此布局为例:

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

p 标签设置为100%高度,但由于其中包含 div 的高度为200px,200px的100%变为200px, em> 100%的 body height.使用 100vh 代替意味着 p 标签将是 body 的100%高度,而不管 div 请查看此随附的小提琴,以轻松查看差异!

What exactly is vmin and vmax?

1vmin 假定 1vh 1vw 之间的最小值. 1vmax 假定 1vh 1vw 之间的最大值.

特别适用于 font-size .

*请注意,这些CSS3单元可在Firefox中动态运行,但其他浏览器需要刷新页面.




相关问题推荐