Question

我有一个传统的3列布局：导航，内容和侧边栏。

内容和侧边栏都有背景颜色，无论内容多少，都需要始终覆盖100％的可见高度。换句话说，当向下滚动或调整页面大小时，背景应该保留在那里。

请参阅此jsfiddle以供参考：http://jsfiddle.net/thv20/acJVw/1/

问题是当您向下滚动或调整大小时，背景会中断。我怎样才能解决这个问题？我已经看到了使用min-height: 100%的建议，但我无法让它发挥作用。

Answer 1

从身体标签上移除“身高：100％”，因为这会破坏您的布局。

相反，请使用侧栏上的position: absolute并将其定位top:0 bottom: 0，因为这会使其高度“100％”。同时设置right: 0将其放置在容器div的右侧（这样可以安全地设置宽度）。

CSS

#container {
    position:relative;   /*add this to use position:absolute on child element */
    overflow: hidden;    /*add this to clear your floats*/
    width: 600px;
    margin: 0 auto;
    border: 1px solid black
}

nav, section{ 
    float: left; 
    width: 200px;
}

section {
    background: red;
}

sidebar {
    background: green;
    position:absolute;     /*add this and positions below */
    top:0;
    bottom:0;
    right:0;
}

JSFiddle：http://jsfiddle.net/acJVw/6/

Answer 2

根据背景的复杂程度，您可以使用具有页面宽度的背景图像，并使用您喜欢的列颜色，将其设置为页面的背景并重复它（Faux Columns by Dan Cederholm）

您也可以绝对定位列，并将top:和bottom:设置为0，但这只是我的头脑。不过，我不知道这是否适用于浏览器。

.sidebar
{
    position: absolute;
    widht: 200px;
    top: 0;
    bottom: 0;
    right: 0;
}

Answer 3

如果我理解正确，你想要的是在窗口中固定的背景颜色，滚动时不会移动。这是你想要的吗？

如果是的话，我建议您在CSS文件中创建一个div分类'what'：

div.whatever
{
    position:fixed;
    z-index:-1;
    background-color:red;
    height:100%;
    top:0;
    left:/*you choose */
}

Answer 4

黑客攻击：

如果你做

 body, html, #container, nav, section, sidebar {height:1000%;}

然后它似乎工作，但这完全取决于用户屏幕的分辨率。

CSS 100％高度列，但页面仍可滚动

4 个答案:

CSS