基于Content div高度的CSS div高度

Question

如何在此jsfiddle中使绿色和红色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>

Answer 1

您遇到的主要问题是form元素没有设置height ，因此其他div继承时没有高度。

给您的表格一个固定的height或height:100%; 它应该工作。

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

您还应该考虑分离CSS和HTML-很难跟踪内联CSS，我已经在jsfiddle-> http://jsfiddle.net/4ZJVh/2/上为您完成了此操作