浮动：向左明确：将 div 都拉伸到全高答案

【问题标题】：float: left makes clear: both stretch div to full height浮动：向左明确：将 div 都拉伸到全高
【发布时间】：2014-06-19 09:19:57
【问题描述】：

我正在创建一个全宽网站，其中有一个标题、一个左侧边栏，其余部分是主要内容。它应该是这样的：

+--------------------------------+
|  header                        |
+---------+----------------------+
|         | div1                 |
| sidebar | div2                 |
|         |                      |
|         |                      |

html 和 css 看起来像这样（但有更多元素）：http://jsfiddle.net/7QJC5/

如您所见，如果我将侧边栏设置为float: left，则清除的 div1 会延伸到全高。我通过手动定位侧边栏找到了解决方法：

position: absolute;
top: 60px;
bottom: 0;
left: 0;

但我不确定这是最好的解决方案。

谁能解释这是为什么，我该如何解决，或者position: absolute 方法可以吗？

【问题讨论】：

从你的第一个 div 中删除 clearfix 类：<div class="div">aaa</div>。添加 clearfix 的任何元素（在右窗格中）都将拉伸到侧边栏高度的底部。

标签： css css-float clearfix

【解决方案1】：

针对你的两个问题：

您可以将overflow:hidden; 添加到#content。所以你的 clearfix 规则 on child 将仅在#content 内应用，不会介意不再是你的浮动侧栏：DEMO

让它变得简单，触发布局。搜索处理浮动元素。有很多方法取决于你看的结果为。
对于滚动条，切换到另一个盒子模型以将填充包含在 100% 中；高度，添加：box-sizing:border-box 到 #main。 DEMO

【讨论】：

【解决方案2】：

在这里，我使用了一些不同的方法来实现相同的效果。检查DEMO。

--CSS 代码--

#header{background:red; width:100%; height:50px;}
#main{width:100%; height:100%; border:1px solid black;display:table;}
#sidebar{background:gold;}
#content{background:purple;}
#sidebar, #content{display:table-cell;}

--HTML 代码--

<div id="header">HEADER</div>
<div id="main">
    <div id="sidebar">SIDEBAR</div>
    <div id="content">
        <div class="">aaa</div>
        <div class="">bbb</div>
    </div>
</div>

【讨论】：

【解决方案3】：

我不会这样做。对于布局，我更喜欢使用display:table 和display:table-cell。不过说说你的情况：

div1 拉伸的原因是因为它正在清除浮动，当您对其应用clearfix 类时。所以float不适用于div2。相反，将其设置为包装 div (#content)，它会正常工作。

<div id="content" class="clearfix">
    <div class="div">aaa</div>
    <div class="div">bbb</div>
</div>

http://jsfiddle.net/7QJC5/2/

再次，我建议您通过 display:table 属性进行布局，因为它在跨浏览器级别上效果更好。

【讨论】：