<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<style>
body {
height: 100vh;
min-height: 100%;
border: 20px dashed gray;
}
.fullheight { min-height: 100%; }
.left, .middle, .right { min-height: 100vh; }
.left { border: 20px dashed red; }
.middle { border: 20px dashed green; }
.right { border: 20px dashed blue; }
</style>
</head>
<body>
<div class="container-fluid fullheight">
<div class="row fullheight">
<div class="left col-xs-4 col-md-4">
<h2 class="text-center">Left</h2>
</div>
<div class="middle col-xs-4 col-md-4">
<h2 class="text-center">Middle</h2>
</div>
<div class="right col-xs-4 col-md-4">
<h2 class="text-center">Right</h2>
</div>
</div>
</div>
</body>
这是this问题的续集。
answer在正确的轨道上。我试图解决最后一个剩余的问题,即左/中/右框超出了它们各自包含的DIV。
该评论回复
calc(100vh - 40px)
CSS文件中的
calc()
是什么意思?无论如何:如何避免出现垂直滚动条?它的存在意味着我一开始并没有保持在100vh之内。 最佳答案
我猜想边界将容器外的高度推高了40px。您可以像这样在div内显示边框:
.left, .middle, .right {
min-height: 100vh;
box-sizing: border-box;
}
或者,如注释所示,从高度中减去40px,例如:
min-height: calc(100vh - 40px);