Question

我有这样的结构（divs）：

#content-wrapper->
  #left
  #center
  #right
#footer

#footer
{
    position: relative;
}

#content-wrapper
{
    position: relative;
    clear: both;
    overflow: hidden;

    width: 100%;
        height: 100%;

    min-height: 300px;
}

但是当#center div中的文字大于min-height时，它会超过#footer。怎么了？

UPD： 示例地址：link

Answer 1

你需要一个新项目。一个更清晰的，清除主要div内的浮动

你不需要任何职位：亲属
你不需要任何明确的：两个
但是你需要在内容包装器中添加一个新项目

此。多数民众赞成。

像div一样漂浮div。它们不会影响div的大小或宽度

另一个使用表格的好方法：

CSS 100% width in floated div

这不是真正的答案，但我更喜欢你使用表格显示的div，它们可以调整大小，放置比仅浮动的div更好。

Answer 2

感谢您提供内容。看起来这个问题正在发生，因为#content-center的固定高度为200px。摆脱这个（以及#content-left和#content-right的固定高度，除非你有充分的理由保留它），或者将其改为min-height，并且页脚应该显示出来低于预期的内容。

如果#content-left或#content-right是最长的列，您仍会遇到一些问题。要解决这个问题，你可以从#content-wrapper div中删除页脚 - 将结构设置为：

<div id="content-wrapper">
    <div id="content-left"></div>
    <div id="content-right"></div>
    <div id="content-center"></div>
</div>
<div id="footer"></div>

如果这对您不起作用，请告诉我。

HTML和divs内容

2 个答案: