0

如何使这个 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>
4

1 回答 1

4

您遇到的主要问题是您的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-24T11:58:20.640 回答