Bootstrap *垂直*响应性答案

【问题标题】：Bootstrap *vertical* responsivenessBootstrap *垂直*响应性
【发布时间】：2017-01-06 22:37:43
【问题描述】：

如果不将宽度管理委托给 Bootstrap，我可以获得三个全高列

使用以下 HTML/CSS。

<!DOCTYPE html>
<head>
    <style>
        div {
            position: fixed;
            border: 5px dashed blue;
            box-sizing: border-box;
        }
        .left {
            height: 100%; top:   0;
            width:  33%; left:   0;
        }
        .middle {
            height: 100%; top:    0;
            width:  33%; left:  33%;
        }
        .right {
            height: 100%; top: 0;
            width:  34%; left:  66%;
        }
        h2.text-center {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="left">
        <h2 class="text-center">Left</h2>
    </div>
    <div class="middle">
        <h2 class="text-center">Middle</h2>
    </div>
    <div class="right">
        <h2 class="text-center">Right</h2></div>
    </div>
</body>

为了让 Bootstrap 处理宽度，我写了

<!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 {
            min-height: 100%;
            border: 3px solid green;
        }
        .fullheight {
            min-height: 100%;
            border: 3px solid blue;
            /* position: absolute; */
        }

    </style>
</head>
<body>
    <div class="container-fluid fullheight">
        <div class="row fullheight">
            <div class="col-xs-4 col-md-4">
                <h2 class="text-center">Left</h2>
            </div>
            <div class="col-xs-4 col-md-4">
                <h2 class="text-center">Middle</h2>
            </div>
            <div class="col-xs-4 col-md-4">
                <h2 class="text-center">Right</h2>
            </div>
        </div>
    </div>
</body>

Switching position to absolute 不能与 Bootstrap 结合使用，并且之前关于此问题的其他讨论（1、2、3、4）没有帮助。

当宽度由 Bootstrap 管理时，如何将高度设置为 100%？

如果有引导方式将 DIV 设置为 100% 高度，那就更好了。

【问题讨论】：

只需将min-height 应用于具有100% 的引导类
抛开这个问题基于意见的性质 - stackoverflow.com/questions/19695784/…
@Roberrrt 上面第二个代码中的.fullheight 类已经这样做了。你能详细说明你的意思吗？
这与我所做的类似，我正在使用 Bootstrap，我认为这样做没有任何内疚。
@Paulie_D 我修改了问题以使我所寻求的内容完全客观。

标签： html css twitter-bootstrap

【解决方案1】：

当宽度由 Bootstrap 管理时，如何将高度设置为 100%？

我将为此引用我的朋友詹姆斯：

有几个相对较新的 CSS3 度量单位称为：

视口百分比（或视口相对）长度。

https://stackoverflow.com/a/16837667/3305454

这些“视口”单元有什么作用？

通常情况下，100% 是相对于父元素而言的，100vh 或 100vw 不尊重它们的初始父元素，而是完全专注于用户视口，即它们的确切屏幕。一个例子（也是从詹姆斯那里偷来的）：

<body style="height:100%">
    <div style="height:200px">
         <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

这里的p标签设置为100%的高度，但是因为它包含的div的高度是200px，所以200px的100%变成了200px，而不是body高度的100%。使用 100vh 代替意味着 p 标签将是 body 的 100% 高度，而不管 div 高度如何。

您的解决方案是将此 CSS 规则应用于元素：

.left, .middle, .right {
    min-height: 100vh;
}

【讨论】：

非常好，但并不完美。如果然后将 3px 替换为边框厚度，例如 20px，您会看到框架从底部突出。怎样才能让它们在底部正确嵌套（就像它们在顶部一样）？
计算（100vh - 40px）？ :)
哦，这还不行，真可惜。但是：box-sizing:border-box;