如何适应超出页脚的内容，即使用 CSS 和 Div 标签溢出？

Question

我已经花费了数小时寻找解决方案，但在这个特定问题上找不到任何东西，所以如果已经得到解答，请原谅我。

我有一个标准的 CSS 页面，其中包含标头、导航行、左列链接、右列内容和页脚。

我已将所有内容设置为页面中心，宽度为 1024 像素。

我无法实现的是，当一列的内容比另一列长时，让两列保持相同的高度。

让我解释一下 - 两列都有一个 1px 的边框，我想一直延伸到页脚。右栏的内容要长得多，所以它会很快到达页脚，但左栏没有，所以边框停止，链接结束。

为了解决这个问题，我将 html、body、container 和两列的高度设置为 100%，如下所示：

html {
height: 100%;
}

body {
height: 100%;
}

#masthead {
width: 1024px;
height:100px;
margin-left:auto; margin-right:auto;
}

#top_nav {
width: 1024px;
height:100px;
margin-left:auto; margin-right:auto;
}

#container {
width: 1024px;
height:100%;
margin-left:auto; margin-right:auto;
}

#left_col {
width: 198px;
float: Left;
height: 100%;
border: 1px solid #FF0000;
}

#page_content {
margin-left: 200px;
width: 824px;
height: 100%;
border: 1px solid #000000;
}

#footer {
bottom: 0px;
clear: both;
width: 1024px;
height: 50px;
margin-left:auto; margin-right:auto;
border: 1px solid #000060;
}

这可行但现在右栏的内容（更长）超出了页脚？并且无论我尝试什么我都无法在不影响左列边框的情况下解决此问题，即我可以使用 min-height: 100%; 来解决溢出和页脚问题，但这有封顶的副作用左列的边框回到导航链接的高度，即边框不再流到左列的底部并向下流到页脚（grrrhhh！）

这是指向页面本身的链接，您可以将其复制并粘贴到 DW 或 EW 等中以查看发生了什么： http://www.iifuture.org/downloads/testzzz.html

如果有人知道如何解决这个悖论，我很想知道！

谢谢 肖恩

Answer 1

实际上从头开始：删除容器上的height:100%，留下col和页面内容。就是这样。

Answer 2

编辑（讨论后修改答案）

This article 有帮助。

style="background: blue url(someimage.png) repeat-y left;"

将上述样式添加到container。这是一个 hack，DIV 不会增长，但背景图像会覆盖它以获得您想要的布局！

请参考this问答选择了解更多。

原答案

请查看溢出属性。我能够让您的示例页面使用添加到 page_content DIV 的以下样式。

position:absolute;overflow:auto;

使用此代码，如果内容超过设置的高度，则会出现滚动条。如果您不想获得滚动条并且可以不显示超出 DIV 高度的数据，只需使用 hidden 而不是 auto。同样，要始终显示滚动条，您可以使用 scroll。

最后一个选项 visible 将使它*(mis)*表现出它现在的行为方式，即让数据增长超过 DIV 高度。请注意，DIV 没有增长，只有内容在增长。