Question

我花了好几个小时寻找解决方案而在这个特定问题上找不到任何东西，所以请原谅我，如果它已被回答。

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

我已将所有内容设置为1024px宽的页面中心。

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

让我解释一下 - 两列都有一个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

编辑（讨论后修改后的答案）

This article有帮助。

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

将上述样式添加到container。这是一个黑客，DIV没有增长，但背景图像覆盖它以获得你想要的布局！

请参阅所选的this问题和答案以了解详情。

原始回答

请看看溢出属性。我能够使用以下样式添加到page_content DIV。

position:absolute;overflow:auto;

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

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

Answer 2

实际上刮擦：删除容器上的height:100%，左侧col和页面内容。就是这样。

如何使用CSS和Div标签来匹配经过页脚的内容，即溢出？

2 个答案: