全高度列无滚动 [英] Full height columns without scroll

问题描述

我目前正在处理此网站： http://weloveprivacy.com/ 我在哪里尝试让内容（#container）拉伸从顶部（.top-wrap）到页脚（.footer），而不会不必要的滚动。我想要的列（.front1，.front2，.front3）总是有一个相等的高度，并填写屏幕，所以边框从顶部到页脚。

I'm working on this site at the moment: http://weloveprivacy.com/ where I'm trying to make the content (#container) stretch to fit from the top (.top-wrap) to the footer (.footer), without getting unnecessary scroll. I want the columns (.front1, .front2, .front3) to always have an equal height and fill out the screen, so the borders stretch from the top to the footer.

这是否可以使用纯CSS？

Is this possible with pure CSS?

推荐答案

很好玩。添加以下CSS：

Well, that was fun. Add the following CSS:

.nav {
 left:0;
}
#wrapper {
 overflow:hidden;
}
#container {
 height:auto !important;
 min-height:100%;
 margin:0 auto;
 padding:0;
}
#container > div {
 margin-bottom:-10000px;
 padding-bottom:10000px;
}
.footer {
 margin-top:-97px;
 position:relative;
}

查看 jsFiddle示例以查看其操作。

margin-bottom / padding-bottom hack会破坏旧版本的IE。我建议使用条件语句来为破解的版本提供该样式，并让他们看到它，而不会向下拉列。

Note: The margin-bottom/padding-bottom hack will break older versions of IE. I'd suggest using conditional statements to provide that style to versions that break, and simply let them see it without the columns stretching down.

这篇关于全高度列无滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！