我有一个有两列的布局--一个左边的div'和一个右边的
div'。
右边的div'有一个灰色的
背景色',我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色'在该
div'的最后一块内容上结束。
我试过高度:100%
,最小高度:100%;
,等等。
有几个CSS 3的测量单位,叫做
来自上面链接的W3候选建议。 视口-百分比长度是相对于初始包含块的大小而言的。 视口百分比长度是相对于初始包含块的大小而言的。 当初始包含块的高度或宽度发生变化时,它们也会相应地进行调整。
这些单位是vh
(视口高度)、vw
(视口宽度)、vmin
(视口最小长度)和vmax
(视口最大长度)。
对于这个问题,我们可以利用vh
。
1vh
等于viewport高度的1%。
也就是说,100vh
等于浏览器窗口的高度,不管元素在DOM树中的位置如何。
<div></div>
div {
height: 100vh;
}
这就是字面上所需要的一切。 这里是一个[JSFiddle例子][2]的使用方法。
除了Opera Mini之外,目前所有最新的主流浏览器都支持这个功能。 请查看 [Can I use...][3] 获取更多支持。
就目前的问题而言,其特点是左右分栏,这里有一个[JSFiddle示例][4],显示了一个涉及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像素,而不是*100%的 "body "高度。
而使用100vh
意味着无论div
高度如何,p
标签的高度都是body
的100%。
看看这个[随附的JSFiddle][5],就能很容易地看出其中的区别了
[1]: http://www.w3.org/TR/css3-values/#viewport-relative-lengths [2]:
[3]: http://caniuse.com/#feat=viewport-units [4]: 1/ [5]: 2/在这种情况下,你可以使用vh
,它是相对于1%的视口高度的。
这意味着如果你想覆盖掉高度,只需简单地使用100vh
。
看下面的图片,我在这里给你画的。
[![如何让div的高度达到浏览器窗口的100%?][1]][1]
试试我为你创建的如下片段。
<!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
.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>
与flex model的解决方案相比,所有其他解决方案,包括投票最高的那个 "vh "都是次优的。
随着CSS flex model的出现,解决100%高度问题变得非常非常容易。
使用height: 100%; display.flex
在父节点上,然后使用height: 100%; display: flex
在父元素上使用height: 100%; display: flex
,在子元素上使用flex: 1
在子元素上。
它们会自动占用容器中所有的可用空间。
请注意,这些标记和CSS是多么的简单。 没有表格黑客或任何东西。
flex模型是所有主流浏览器都支持以及IE11+。
<!--开始片段。 js hide.false --> -- begin snippet: js hide: false -->
html, body {
height: 100%;
}
body {
display: flex;
}
.left, .right {
flex: 1;
}
.left {
background: orange;
}
.right {
background: cyan;
}
<!--语言。 lang-html -->
<!--结束片段-->。
在这里了解更多关于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>
false -->
<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
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%可用宽度。 100%",它的意思是"占用父元素100%的可用宽度或窗口的宽度。
当你指定 "height.100%"时,它只意味着"占用父元素的100%可用宽度或窗口的宽度。
100%"时,它只意味着"占用父元素100%的可用高度。
这意味着如果你不在顶层元素上指定高度,所有子元素的高度将是0
或父元素的高度,这就是为什么你需要将最顶层元素的窗口高度设置为min-height
。
我总是指定主体的min-height为100vh,这样可以方便定位和计算。
body {
min-height: 100vh;
}
这对我很有效。
html, body {
height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}
#wrapper {
min-height: 100%; /* Minimum height for a modern browser */
height:auto !important; /* Important rule for a modern browser */
height:100%; /* Minimum height for Internet Explorer */
overflow: hidden !important; /* Firefox scroll-bar */
}
[1]: http://www.gn-webdesign.de/css-tutorials/css-div-height-100.html 摘自[本页][1]。
有几种方法可以将<div>
的高度设置为100%。
方法(A):。
<!--开始片段。 js hide: false console: false babel.false -->-- begin snippet: js hide: false console: false false -->
html,
body {
height: 100%;
min-height: 100%;
}
.div-left {
height: 100%;
width: 50%;
background: green;
}
.div-right {
height: 100%;
width: 50%;
background: gray;
}
<div class="div-left"></div>
<div class="div-right"></div>
<!--结束片段-->
使用vh的方法(B):。
<!--开始片段。 js hide: false console: true babel.false --> 方法(B)使用vh:
html,
body {
height: 100%;
min-height: 100%;
}
.div-left {
height: 100vh;
width: 50%;
background: green;
float: left;
}
.div-right {
height: 100vh;
width: 50%;
background: gray;
float: right;
}
<div class="div-left"></div>
<div class="div-right"></div>
<!--结束片段-->
使用flex box的方法(c):。
<!--开始片段。 js hide: false console: false babel.false --> 方法(c)使用flex box:
html,
body {
height: 100%;
min-height: 100%;
}
.wrapper {
height: 100%;
min-height: 100%;
display: flex;
}
.div-left {
width: 50%;
background: green;
}
.div-right {
width: 50%;
background: gray;
}
<div class="wrapper">
<div class="div-left"></div>
<div class="div-right"></div>
</div>
<!--结束片段-->
这里和你之前的回答不完全一样,但可能对一些人有帮助。
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0px;
}
#one {
background-color: red;
}
#two {
margin-top: 0px;
background-color: black;
color: white;
overflow-y: scroll;
}
默认情况下,块元素占用了其父元素的全部宽度。
这就是它们满足其设计要求的方式,即垂直堆叠。
[**9.4.1 块格式化
语境**](https://www.w3.org/TR/CSS22/visuren.html#block-formatting)
在区块格式化的背景下,方框是一个接一个地排列的。
纵向,从包含块的顶部开始。
然而,这种行为并没有延伸到高度。
默认情况下,大多数元素的高度是其内容的高度(height: auto
)。)
与宽度不同,如果你想要额外的空间,你需要指定一个高度。
因此,请记住这两点。
<!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
.Contact {
display: flex; /* full width by default */
min-height: 100vh; /* use full height of viewport, at a minimum */
}
.left {
flex: 0 0 60%;
background-color: tomato;
}
.right {
flex: 1;
background-color: pink;
}
body { margin: 0; } /* remove default margins */
<div class="Contact">
<section class="left">
<div class="">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
</div>
</section>
<section class="right">
<img />
</section>
</div>
<!--结束片段-->
Flexbox是这类问题的最佳选择。 虽然大多以在水平方向布局内容而闻名,但实际上Flexbox对于垂直布局问题也同样适用。 你所要做的就是将垂直部分包裹在一个flex容器中,然后选择你想要展开的部分。 它们会自动占用容器中的所有可用空间。
1:
其中一个选项是使用CSS表。 它对浏览器的支持力度很大,甚至可以在Internet Explorer 8中使用。
[JSFiddle实例][1]。
<!--开始片段。 js hide.false --> -- begin snippet: js hide: false -->
html, body {
height: 100%;
margin: 0;
}
.container {
display: table;
width: 100%;
height: 100%;
}
.left, .right {
display: table-cell;
width: 50%;
}
.right {
background: grey;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
[1]: