我得到这个几乎很好

html - 全屏CSS:100vh DIV全部位于其父DIV中-LMLPHP

以下代码的布局

<!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);

10-01 18:53
查看更多