最小高度為100％的div不會擴展background-color

Question

我有一個帶有堆疊div的頁面，並且div以塊方式動態添加。 它必須覆蓋視口高度的100％，並在內容超出視口時顯示滾動條。 我面臨的問題是，外部div必須具有背景色。 當給這個div的最小高度為100％並應用height：1px固定，以便子div繼承100％的高度時，我將獲得所需的效果，就像父級內部的子對象中的最小高度為100％而不繼承高度。顏色未擴展到全高。 此處模仿了嵌套的div和動態添加div的機制： https : //jsfiddle.net/b859L1gs/

 $(document).ready(function() { $("#clickme").click(function() { $(".two").append(" < div class = 'region' > < /div>") }); })

 html { height: 100%; } body { height: 100%; } .one { min-height: 100%; height: 1px; background: green; } .two { height: 100%; } .region { height: 200px; border: 1px solid red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <div class="one"> <div class="two"> <div class="three"> ... <div class="region"> </div> <button id="clickme"> here </button> </div> </div> </div> </body> </html>

單擊按鈕展開div，然后看到高度展開，但背景顏色不展開。 請注意，根據應用程序的限制是僅在最外層div限制背景顏色，而不限制主體。

Answer 1

您需要提供background: green; 到.region 。 然后它將擴展背景色。

.region{
  height:200px;
  border:1px solid red;
   background: green;
}

工作小提琴

Answer 2

為什么要設置height: 1px和min-height: 100% ？

嘗試這個：

.one {
    background: green;
}

最小高度為100％的div不會擴展background-color

問題描述

2 個解決方案

解決方案1
0 2016-02-02 04:04:34

解決方案2
0 2016-02-02 04:20:00

最小高度為100％的div不會擴展background-color

問題描述

2 個解決方案

解決方案1 0 2016-02-02 04:04:34

解決方案2 0 2016-02-02 04:20:00

解決方案1
0 2016-02-02 04:04:34

解決方案2
0 2016-02-02 04:20:00