html - 如何适应超出页脚的内容，即使用 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 和页面内容。就是这样。