基於內容高度的CSS div高度div

如何讓綠色和此jsfiddle中的紅色div與藍色div的內容一起展開？基於內容高度的CSS div高度div

<html style="height: 100%" > 
    <head runat="server"> 
     <title></title> 
     <asp:ContentPlaceHolder id="ContentPlaceHolder" runat="server"> 

     </asp:ContentPlaceHolder> 
    </head> 
    <body style="height: 100%; background-color: grey"> 
     <form id="form1" runat="server"> 
      <div style="background-color: fuchsia; height: 50px; width: 100%; float: left; "></div> 
      <div style="background-color: green; min-height: 100%; width: 20%; float: left; ">oo</div> 
      <div style="background-color: blue; float: left; width:60%; height: 100%" >    
      test 
      </br> test 
      </br> test 
      </br> test 
      </br> test 
      </br> test 
      </br> test 
      </br> test 
      </br> test 
      </br> test 
      </br> test 
      </br> test 
      </br> test 
      </br> 
      </div> 
      <div style="background-color: red; float: left; width: 20%; height: 200px;"></div> 
     </form> 
    </body> 
</html>

來源

2013-02-24 Darkmage

你的主要問題是，你的form元素沒有height集，因此不存在高度爲其他div的繼承。

給你的表格一個固定的height或height:100%;它應該工作。

<form id="form1" runat="server" style="height:100%;">

你也應該想想你的分離CSS和HTML - 內聯CSS是很難跟蹤的，我這樣做你上的jsfiddle - >http://jsfiddle.net/4ZJVh/2/

來源

2013-02-24 11:58:20 Wez

基於內容高度的CSS div高度div

回答

相關問題