如何适应过去页脚的内容，即使用CSS和Div标签溢出？ [英] How to fit content which goes past footer i.e. overflows using CSS and Div tags?

问题描述

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

I have spent hours looking for a solution and cannot find anything on this particular issue, so please forgive me if it has been answered.

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

I have a standard CSS page with a masthead, a navigation row, a left column for links, a right column for contents and a footer.

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

I have set everything to the center of the page at 1024px wide.

我只是无法实现的是保留2列在相同的高度，当一个具有比另一个更长的内容。

What I just cannot achieve is to have the 2 columns stay at the same height when one has longer content than the other.

让我解释一下 - 两列都有一个1px的边框，我想一直延伸到页脚。右列有更长的内容，所以它到达页脚非常快，但左列不那么边界停止，链接完成。

Let me explain this - both columns have a 1px border that I would like to extend all the way down to the footer. The right column has much longer content so it reaches the footer very quickly but the left column doesn't so the border stops, where the links finish.

为了解决这个问题，我在html，body，container和两列中将高度设置为100％：

To fix this problem I have set the heights to 100% in the html, body, container and the two columns as follows:

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;
}

这样可以 BUT 列（更长）是否通过页脚？并且无论我尝试我不能修复这不影响左栏的边界，即我可以使用 min-height：100％; 修复溢出和页脚的问题，但这有副作用capping左侧列上的边框回到导航链接的高度，即边界不再流到左列的底部，向下到页脚（grrrhhh！）

This works BUT now the content of the right column (which is much longer) goes way past the footer? and no matter what I try I cannot fix this without affecting the left column's border i.e. I can use min-height: 100%; which fixes the overflow and footer problem, BUT this has the side effect of capping the border on the left column back to the Navigation link's height i.e. so the border no longer flows to the bottom of the left column and down to the footer (grrrhhh!)

这里是一个链接到页面本身，你可以复制并粘贴到DW或EW等看到发生了什么：
http://www.iifuture.org/downloads/testzzz.html

Here is a link to the page itself which you can copy and paste into DW or EW etc. to see what's going on: http://www.iifuture.org/downloads/testzzz.html

如果有人知道如何解决这个悖论

If anyone knows how to fix this paradox I'd love to know about it!

推荐答案

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

本文有帮助。

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

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

Add the above style to container. This is a hack, the DIV doesn't grow but the background image covers it up to get the layout you want!

请参阅此问答选择了解详情。

Please refer this question and answer selected to learn more.

原始answer

请参阅overflow属性。我可以让你的示例页使用下面的样式添加到page_content DIV。

Please take a look at overflow property. I was able to get your example page working with the below style added to page_content DIV.

position:absolute;overflow:auto;

使用此代码，如果内容超过设置的高度，将显示滚动条。如果您不想获取滚动条，并且不显示DIV高度以外的数据，只需使用隐藏而不是自动即可。同样，要始终显示滚动条，您可以使用滚动。

With this code the scrollbars appear if the content exceed the height set. If you do not want to get the scrollbars and are okay with not showing the data beyond the DIV height, just use hidden instead of auto. Likewise, to display the scrollbars at all times, you may use scroll.

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

The last option visible will make it *(mis)*behave the way it is behaving right now i.e. letting the data grow beyond the DIV height. Notice that the DIV is not growing, only the content is.

这篇关于如何适应过去页脚的内容，即使用CSS和Div标签溢出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！