使用CSS的等高栏/页脚？ [英] Equal height columns w/ footer using CSS?

问题描述

我正在创建一个具有可变宽度边栏和内容区域的商业应用程序，以及一个页脚。对于我的生活，我无法弄清楚如何使页脚总是使用CSS正确显示，无论侧栏高度如何。下面是对这个问题的说明：

如果内容区域大于侧边栏，则页脚和侧边栏没问题，但不是相反（ faux columns 技术似乎不适用于页脚，而与footer相等的高度技巧只有在侧边栏较短时才起作用）。

有什么建议吗？我在这里找到了一个答案，只适用于IE6，但没有别的只是使用CSS。我很想让自己的生活变得简单，并使用TABLE，但是无论哪种方式，我都很想知道如何做到这一点W / CSS（一点JavaScript不会伤害，但W / O更好）。

解决方案

一种技术是为列' padding-bottom 和 margin-bottom 的类似的大负值。如下所示：

  #container {
 overflow：hidden; 
} 
 
 #container .column {
 padding-bottom：20010px; / * X + padding-bottom * / 
 margin-bottom：-20000px; / * X * / 
} 
 
 #footer {
 position：relative; 
} 
  

我所见过的方法的最佳描述是One True Layout关于职位就是一切。 （不要忘了查看潜在问题一文。）

I am creating a business application that has a variable width sidebar and content area, along with a footer. For the life of me, I can't figure out how to make the footer ALWAYS display correctly using CSS, regardless of sidebar height. Here's an illustration of the issue:

The footer and sidebar is fine if the content area is larger than the sidebar, but not the reverse (the faux columns technique doesn't seem to work with a footer, and the equal height with footer technique only seemed to work if the sidebar is shorter).

Any suggestions? I found an answer here that only worked for IE6, but nothing else just using CSS. I'm tempted to make my life easy and use TABLEs, but either way I'd love to know how to do this w/ CSS (a little javascript wouldn't hurt, but w/o is better).

解决方案

One technique is to use a very large value for the columns' padding-bottom and a similarly large negative value for margin-bottom. Something like the following:

#container {
    overflow: hidden;
}

#container .column {
    padding-bottom: 20010px;  /* X + padding-bottom */
    margin-bottom: -20000px;  /* X */
}

#footer {
    position: relative;
}

The best description of the method I've seen is the in the "One True Layout" article on Position is Everything. (Don't forget to check out the potential problems article as well.)

这篇关于使用CSS的等高栏/页脚？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！