Question

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

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

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

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

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

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

任何人都可以解释为什么会这样，我怎么解决它，或者position: absolute方法好吗？

Answer 1

我不会这样做。对于布局，我更喜欢使用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属性中进行布局，因为它在跨浏览器级别上效果更好。

Answer 2

对于你的两个问题：

您可以将overflow:hidden;添加到#content。所以你的clearfix规则关于孩子只会在#content中使用，它不会介意你的漂浮侧栏： DEMO

简化，触发布局。搜索处理浮动元素。取决于你看的结果，有很多种方法 for。
对于滚动条，交换到另一个框模型以将填充包含在100％中;高度，将box-sizing:border-box添加到#main。的 DEMO

Answer 3

在这里，我使用了一种不同的方法来达到同样的效果。查看 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>

float：left清楚：将div拉伸到全高

3 个答案: