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 に答える