css - float div 未扩展到 100%

Question

我知道这不是一个不常见的问题，因为使用谷歌搜索后出现了很多与我自己的问题类似的页面。但尽管我可能会尝试我无法修复它，所以这里是:

我目前正在为我的橄榄球队建立网站。它有两列布局，有一个主区域和一个侧边栏。相关的HTML大概是

<div id="wrapper">
    <div id="maincolumn"></div>
    <div id="sidebar"></div>
    <div class='clear'></div>
</div>

从一些网站上，我了解到我需要将 body 和 html 以及所有容器设置为 100%，所以我有:

html, body, #wrapper, #innerwrapper, #sidebar { height: 100%; min-height: 100%; 
#wrapper { max-width:900px; margin:0 auto; width:90%; }
#sidebar { float: right; width: 35%; padding:2%; background-color:#f7f7f7; }
#maincolumn { width:56%; float:left; padding-right:5%; }
.clear { clear:both; }

我遇到的问题是，当#maincolumn 有很多内容时，边栏不会一直扩展到页面底部，这是我想要的行为。我通过将所有容器设置为 100% 然后添加 clear 元素取得了一些进展，但这仍然只扩展了一小段路。

Answer 1

您可以使用 CSS 表格代替 float :

#wrapper {
    display: table;
}
#sidebar, #maincolumn {
    display: table-cell;
}

Demo