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表格来代替浮动：

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

Demo

Answer 2

HTML：

<div id="wrapper">
    <div id="maincolumn">vgnhngbbv hbcv nfvfbngbc</div>
    <div id="sidebar">dfrtnjnbc ghm gbgfnbvfnythgfbbfg</div>
    <div class='clear'></div>
</div>

CSS：

html, body, #wrapper, #maincolumn, #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:2%; background-color:#ff0000; }
.clear { clear:both;  }

DEMO

Answer 3

由于您希望两个列具有相同的高度而不管其中的内容量如何，首先您必须了解设置height:100%设置相对于父div（或包含块）宽度的高度）。

如果情况确实如此，那么你可以做什么：

#wrapper{
height:900px;
}
#sidebar{
height:100%;
}
#maincolumn{
height:100%;
}

DEMO

浮动div没有扩大到100％

3 个答案: