Question

如果没有将宽度管理委托给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％？

如果有一个Bootstrap方式将DIV设置为100％高度，那就更好了。

Answer 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，而不是身高的100％。使用100vh代替意味着无论div高度如何，p标签都将是身体的100％高度。

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

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

Bootstrap 垂直响应

1 个答案:

Bootstrap *垂直*响应

1 个答案:

Bootstrap 垂直响应