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

我有一个传统的三栏布局：导航、内容和边栏

内容和侧边栏都有一个背景色，需要始终覆盖100%的可见高度，而不管其中有多少内容。换句话说，向下滚动或调整页面大小时，背景应保持不变

请参阅此JSFIDLE以供参考：

---

问题是当你向下滚动或调整大小时，背景会被切断。我怎样才能解决这个问题？我看到过使用

最小高度：100%

的建议，但我无法做到这一点。

根据您的背景有多复杂，您可以使用具有页面宽度并填充您喜欢的列颜色的背景图像，将其设置为页面背景并重复（）

您还可以绝对定位列，并将

top:

和

bottom:

设置为

0

，但这只是我的想法。不过，我不知道这是否适用于跨浏览器

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

---

若我理解正确的话，你们想要的是一个背景色，它固定在窗口中，滚动时不会移动。这是你想要的吗

如果是，我建议您在CSS文件中创建一个分类为“whatever”的div：

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

黑客：

如果你

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

然后它看起来会工作，但这完全取决于用户屏幕的分辨率

删除body标签上的“height:100%”，因为这会破坏您的布局

相反，在侧栏上使用

position:absolute

，并将其放置在

top:0

bottom:0

，因为这将使其高度为“100%”。同时设置

right:0

将其定位在容器div的右侧（这是安全的，因为您已经设置了宽度）

CSS

---

JSFiddle:

我不建议这样做。嗯，我刚刚意识到，如果内容区域中的文本比侧边栏中的文本少，这会严重破坏。在这种情况下，它仍然应该覆盖100%的高度：是的，不幸的是，使用这种方法，父div决定绝对定位div的高度。您可以通过添加几个填充div来解决这个问题：

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