Question

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

Answer 1

你遇到的主要问题是你的form元素没有设置height，所以其他div没有高度可以继承。

为您的表单提供固定的height或height:100%;，它应该有效。

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

你还应该考虑分离你的CSS和HTML - 内联CSS很难跟踪，我已经在jsfiddle上为你做了这个 - ＆gt; http://jsfiddle.net/4ZJVh/2/

CSS div高度基于Content div的高度

1 个答案: