Question

所以，即时通讯使用bootstrap 3.0，并处理列，并且我的列高度有问题。

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

enter image description here

我尝试将列的高度设置为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;并设置儿童的百分比高度混淆浏览器以从未定义的值计算元素的高度，因为它为null，因此浏览器将不执行任何操作。

你需要添加

 <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

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

Bootstrap柱，100％高度不适用

1 个答案: