2013-02-24 6 views
0

Как я могу сделать зеленый и красный div в этом jsfiddle разворачиваться с содержимым синего div?CSS div высота по высоте содержимого div

http://jsfiddle.net/4ZJVh/

<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> 

ответ

4

Основная проблема у вас есть, что ваш form элемент не имеет height набора, так что нет высоты для других див наследовать.

Дайте свою форму фиксированной height или height:100%;, и она должна работать.

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

Вы также должны думать о том, разделяя вашу CSS и HTML - Встроенный CSS очень трудно следить, я сделал это для вас на jsfiddle ->http://jsfiddle.net/4ZJVh/2/

Смежные вопросы