我有两列的布局 - 左div
和右div
。
右边的div
具有灰色background-color
,我需要根据用户浏览器窗口的高度将其垂直扩展。现在, background-color
在该div
中的最后一条内容处结束。
我已经尝试过height:100%
, min-height:100%;
等
有几个 CSS 3 度量单位,称为:
根据上面链接的 W3 候选推荐书:
视口百分比长度相对于初始包含块的大小。更改初始包含块的高度或宽度时,将对其进行相应缩放。
这些单位是vh
(视口高度), vw
(视口宽度), vmin
(视口最小长度)和vmax
(视口最大长度)。
对于这个问题,我们可以使用vh
: 1vh
等于视口高度的 1%。也就是说,无论元素在 DOM 树中位于何处, 100vh
都等于浏览器窗口的高度:
<div></div>
div {
height: 100vh;
}
这实际上就是所需要的。这是一个正在使用的JSFiddle 示例 。
目前,除 Opera Mini 之外,所有最新的主流浏览器均支持此功能。查看我可以使用...以获得更多支持。
对于具有左右分隔线的当前问题,这是一个JSFiddle 示例,显示了涉及vh
和vw
的两列布局。
100vh
与100%
有何不同? 以以下布局为例:
<body style="height:100%">
<div style="height:200px">
<p style="height:100%; display:block;">Hello, world!</p>
</div>
</body>
此处的p
标签设置为 100%高度,但是由于其包含div
高度为 200 像素,因此 200 像素的 100%变为 200 像素, 而不是 body
高度的 100%。相反,使用100vh
意味着p
标签将为body
100%高度,而与div
高度无关。看看这个随附的 JSFiddle,可以轻松看到其中的区别!
如果要设置<div>
或任何元素的高度,也应将<body>
和<html>
的高度也设置为 100%。然后您可以将元素的高度设置为 100%:)
这是一个例子:
body, html {
height: 100%;
}
#right {
height: 100%;
}
如果您能够完全定位自己的元素,
position: absolute;
top: 0;
bottom: 0;
会做到的。
您可以在 CSS 中使用视口单位:
HTML:
<div id="my-div">Hello World!</div>
CSS:
#my-div {
height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
}
与弹性模型解决方案相比,所有其他解决方案(包括投票最多的带有vh
解决方案)都不是最优的。
随着CSS flex 模型的出现,解决 100%高度问题变得非常非常容易:use height: 100%; display: flex
在父元素上height: 100%; display: flex
,在子元素上height: 100%; display: flex
flex: 1
。他们会自动占用容器中的所有可用空间。
注意标记和 CSS 是多么简单。没有桌子黑客或任何东西。
所有主要的浏览器以及 IE11 + 都支持 flex 模型。
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>
在此处了解有关flex 模型的更多信息。
您没有提到一些重要的细节,例如:
这是一种可能性:
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>
根据需要固定的色谱柱和液体的色谱柱,可以有多种变化。您也可以使用绝对定位来做到这一点,但我通常发现使用浮点数会获得更好的效果(特别是在跨浏览器方面)。
这对我有用:
<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>
使用position:fixed
而不是position:absolute
,这样即使您向下滚动该分区也会扩展到屏幕的末端。
这是固定高度的方法。
在您的 CSS 中使用:
#your-object: height: 100vh;
对于不支持vh-units
浏览器,请使用 modernizr。
添加此脚本(以添加对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;
});
如果浏览器不支持vh-units
最后使用此函数将视口的高度添加到#your-object
:
$(function() {
if (!Modernizr.cssvhunit) {
var windowH = $(window).height();
$('#your-object').css({'height':($(window).height())+'px'});
}
});
100%
的宽度和高度工作方式不同。
当您指定width: 100%
,表示 “从父元素或窗口的宽度中获取可用宽度的 100%”。
当您指定height: 100%
,仅表示 “从父元素获取 100%的可用高度”。这意味着如果您未在顶级元素上指定高度,则所有子元素的高度将为0
或父元素的高度,这就是为什么您需要将最顶层元素设置为min-height
窗口高度。
我总是将主体的最小高度指定为 100vh,这使定位和计算变得容易,
body {
min-height: 100vh;
}