引导*垂直*响应 [英] Bootstrap *vertical* responsiveness
问题描述
如果没有将宽度管理委托给Bootstrap，我可以获得三个全高列
Without delegating width management to Bootstrap, I can get three full-height columns
和以下HTML / CSS。
with the following 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处理宽度，我写了
To let Bootstrap handle the widths, I wrote
<!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>
切换绝对位置不能与Bootstrap结合使用，并且其他有关此问题的先前讨论（ 1 ， 2 ， 3 ， 4 ）无济于事。
Switching position to absolute does not work in combination with Bootstrap, and the other previous discussions on this issue (1, 2, 3, 4) do not help.
当宽度由Bootstrap管理时，如何将高度设置为100％？
How do I set the height to 100% when the widths are managed by Bootstrap?
如果存在Bootstrap方式将DIV设置为高度为100％，那会更好。
If there is a Bootstrap-way to set DIVs to 100% height, that would be even better.
推荐答案
如何将高度设置为100宽度为m时的％
How do I set the height to 100% when the widths are managed by Bootstrap?
我要为此举我的朋友詹姆斯：
I'm going to cite my friend James for this one:
有一些相对较新的CSS3测量单位，称为：
There are a couple of relatively new CSS3 measurement units called:
视口百分比（或视口相对）长度。
https://stackoverflow.com/a/16837667/3305454
这些视口单元的作用是什么？
通常情况下，相对于父元素100％ ，100vh或100vw不尊重其最初的父母，而是完全专注于用户的视口，这是他们的确切屏幕。一个例子（也是从詹姆斯那里偷来的）：
Where normally, 100% is relative to the parent element, 100vh or 100vw do not respect their initial parents, but focus entirely on the users viewport, which is their exact screen. An example (also stolen from James):
<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意味着p标签将是身体的100％高度，而不管div的高度如何。
The p tag here is set to 100% height, but because its containing div has 200px height, 100% of 200px becomes 200px, not 100% of the body height. Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height.
您的解决方案是应用此CSS规则
Your solution would be to apply this CSS rule to the elements:
.left, .middle, .right {
min-height: 100vh;
}
这篇关于引导*垂直*响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
