2

以下の HTML を参照してください。 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        html, body
        {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            border: 1px solid red;
        }
        #MainDiv
        {
            width: 100%;
            min-height: 200px;
            height: auto;
            border: 1px solid blue;
        }
        #Contents
        {
            width: 500px;
            margin: 0 auto;
            min-height: 100px;
            height: auto;
            border: 1px solid green;
        }
        #RContents
        {
            float: right;
            width: 200px;
            min-height: 50px;
            height: auto;
            border: 1px solid pink;
        }
        #LContents
        {
            float: right;
            width: 200px;
            min-height: 50px;
            height: auto;
            border: 1px solid yellow;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="MainDiv">
        <div id="Contents">
            <div id="RContents">
                Right Contents
            </div>
            <div id="LContents">
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
                Left Contents
                <br />
            </div>
        </div>
    </div>
    </form>
</body>
</html>

そして、この JSFiddle リンク:
jsfiddle

私の例では float と height:100% の間の問題は何ですか?

body、MainDiv、およびContents div をLContents div で成長させるにはどうすればよいですか?

min-height s are so important

前もって感謝します

4

4 に答える 4

1

"Contents" div の最後に clear:both を含む別の div を配置してみてください。

<div id="MainDiv">
    <div id="Contents">
        <div id="RContents">
            Right Contents
        </div>
        <div id="LContents">
            Left Contents
            ...                
        </div>
        <div style="clear:both">
    </div>
</div>
于 2011-10-25T14:23:39.567 に答える
1

float: rightfromを削除するLContentsと、正常に動作するようです

フィドル: http://jsfiddle.net/Rj4jf/2/

于 2011-10-25T14:18:04.607 に答える
1

このような：

http://jsfiddle.net/9TLFM/

clear:both を使用してフロートをクリアし、ボディから幅と高さを削除しました

于 2011-10-25T14:15:52.537 に答える
1

フロートをクリアするだけです。

両方のフローティング div の最後に div を配置します (まだ 内にあります#Contents)。

例：

http://jsfiddle.net/Rj4jf/1/

于 2011-10-25T14:17:43.857 に答える