引導柱，高度不適用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 ; 並將高度百分比設置為子級，將使瀏覽器無法根據未定義的值計算元素的高度，因為它為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>

僅當設置了父元素高度時，它才會再次起作用，

完整參考這個問題在這里

因此，如果要將網頁上的高度設置為百分比，則必須設置要定義高度的每個父元素的高度。