Question

请参阅以下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

浮动和高度之间有什么问题：在我的例子中是100％？

如何强制正文， MainDiv 和内容 div与 LContents div一起成长？

min-height s are so important

提前致谢

Answer 1

像这样：

http://jsfiddle.net/9TLFM/

我使用clear清除浮动：两者并从身体上移除了宽度和高度

Answer 2

清除漂浮物。

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

示例：

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

Answer 3

从float: right移除LContents，它似乎工作正常

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

Answer 4

尝试将另一个div设为clear：两者都位于“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>

浮点数和高度之间的问题是什么：100％的div

4 个答案: