分享程序员开发的那些事...
更新时间：2023-11-22 22:49:16
如何将高度设置为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://***.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;
}