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

像这样：

http://jsfiddle.net/9TLFM/

我已经使用 clear:both 清除了浮动，并从 body 中删除了宽度和高度

于 2011-10-25T14:15:52.537 回答
1

只需清除浮动。

在两个浮动 div 的末尾放置一个 div（仍在内部#Contents）。

例子：

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

于 2011-10-25T14:17:43.857 回答
1

删除float: rightfrom LContents，它似乎工作正常

小提琴：http: //jsfiddle.net/Rj4jf/2/

于 2011-10-25T14:18:04.607 回答
1

尝试将另一个带有 clear:both 的 div 放在“Contents” 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 回答