html - Bootstrap 列，100% 高度不适用

Question

因此，我使用 bootstrap 3.0 并处理列，但我遇到了列高问题。

我想要的输出是在列之间有白色边框，我能够在具有相同高度的列上实现这一点，但是如果列的高度较短，边框也很短，

我尝试将列的高度设置为 100%，但没有用，通过精确的 px (100px) 设置列的高度有效，但我不能使用它，因为我需要列高度来响应

这是我的html代码

            <div class="col-xs-12 bg-8560a9">
                <div class="col-xs-4 text-left border-right-white full-height">Europe Zone 1 (West)</div>
                <div class="col-xs-4 border-right-white full-height">
                    <div class="col-xs-6">794 M</div>
                    <div class="col-xs-6">81.6%</div>
                </div>
                <div class="col-xs-4 full-height">
                    <div class="col-xs-6">833 M</div>
                    <div class="col-xs-6">83.5%</div>
                </div>
            </div>

CSS

.full-height{height:100% !important;}

Answer 1

这是当父元素没有设置高度时发生的常见问题，对于浏览器，高度和宽度的行为不同，您可以跳过设置宽度，但对于元素高度，这是一般问题

假设你的父元素有 height: auto;并为 child 设置百分比高度 混淆浏览器根据未定义的值计算元素的高度，因为它为空，所以浏览器将不执行任何操作。

你需要添加

 <div class="col-xs-12 bg-8560a9 full-height">
            <div class="col-xs-4 text-left border-right-white full-   height">Europe Zone 1 (West)</div>
            <div class="col-xs-4 border-right-white full-height">
                <div class="col-xs-6">794 M</div>
                <div class="col-xs-6">81.6%</div>
            </div>
            <div class="col-xs-4 full-height">
                <div class="col-xs-6">833 M</div>
                <div class="col-xs-6">83.5%</div>
            </div>
        </div>

只有在设置了父元素高度的情况下，这才会再次起作用，

这个问题的完整引用是here

因此，如果您想将网页上的高度设置为百分比，则必须设置您想要定义高度的父元素的每个父元素的高度。