我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。
我尝试过高度:100%,最小高度:100%;,等
当前回答
与flex模型解决方案相比,所有其他解决方案,包括投票最高的vh解决方案都是次优的。
随着CSS flex模型的出现,解决100%高度问题变得非常非常简单:使用高度:100%;显示:父元素上显示flex,子元素上显示flex:1。它们将自动占用容器中的所有可用空间。
注意标记和CSS是多么简单。没有桌子黑客之类的。
所有主要浏览器以及IE11+都支持flex模型。
html,正文{高度:100%;}正文{显示:柔性;}.左,.右{挠曲:1;}.左侧{背景:橙色;}.对{背景:青色;}<div class=“left”>左</div><div class=“right”>右</div>
在这里了解有关flex模型的更多信息。
其他回答
这是一个高度修正。
在CSS中使用:
#your-object: height: 100vh;
对于不支持vh单元的浏览器,请使用modernizr。
添加此脚本(为vh单元添加检测)
// 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单位,请使用此函数将视口的高度添加到#your object:
$(function() {
if (!Modernizr.cssvhunit) {
var windowH = $(window).height();
$('#your-object').css({'height':($(window).height()) + 'px'});
}
});
你需要做两件事,一是将高度设置为你已经做到的100%。第二个是将位置设置为绝对位置。这应该会奏效。
html,
body {
height: 100%;
min-height: 100%;
position: absolute;
}
来源
您可以使用显示器:flex和高度:100vh
html,正文{高度:100%;边距:0px;}正文{显示:柔性;}.左,.右{挠曲:1;}.左侧{背景:橙色;}.对{背景:青色;}<div class=“left”>左</div><div class=“right”>右</div>
即使有了这里的所有答案,我还是惊讶地发现没有一个真正解决了这个问题。如果我使用100vh的高度/分钟的高度,当内容超过一页时,布局就会中断。如果我改用100%高度/分钟高度,当内容小于页面高度时,布局会中断。
我找到的解决方案(解决了这两种情况)是结合前两个答案:
html, body, #mydiv {
height: 100%;
min-height: 100vh;
}
使用FlexBox CSS
Flexbox非常适合这类问题。虽然Flexbox主要以水平方向布局内容而闻名,但它实际上同样适用于垂直布局问题。您所要做的就是将垂直部分包装在柔性容器中,并选择要展开的部分。它们将自动占用容器中的所有可用空间。