浮动div不会扩展到100％ [英] Floated div not expanding to 100%

问题描述

我知道这并不是一个罕见的问题，因为有一点Google搜索扔了相当多的页面，与我自己的类似的问题。但尝试，因为我可能不能解决它，所以这里：

I know that this is not an uncommon problem, as a bit of Googling threw up quite a few pages with similar problems to my own. But try as I might I can't fix it so here goes:

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

I am currently building the website to my rugby team. It has a two column layout, with a main area and a sidebar. The relevant HTML is roughly

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

从一些网站，我收集了我需要设置body和html为100％所有的容器，所以我有：

From some of the websites, I have gleaned that I need to set body and html to 100% and all the containers, so I have:

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％，然后添加清除元素，但仍然只是一个短暂的扩展。

The problem I am having, is that when #maincolumn has a lot of content, the sidebar does not expand all the way down to the bottom of the page which is the behaviour I would like. I made some progress by setting all the containers to 100% and then adding the clear element, but that still only expands it a short way.

推荐答案

可以使用CSS表格，而不是浮动：

Instead of floating, you can use CSS tables:

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

演示

这篇关于浮动div不会扩展到100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！