CSS：除内容外的任何内容都已修复答案

【问题标题】：CSS: Anything but Content fixedCSS：除内容外的任何内容都已修复
【发布时间】：2014-10-04 19:15:53
【问题描述】：

我正在尝试制作一个布局，其中横幅、导航和页脚始终保持固定，而您可以滚动内容。我在这里看到了一些类似的布局，但实际的页面内容并不局限于此。我现在想要的是把任何东西放在中心，但你最好你可能需要一些视觉上的东西——我到目前为止得到的东西：

html

<body>
<div id="container">
    <div id="banner"></div>
    <div id="main">
        <div id="nav1"></div>
        <div id="nav2"></div>
        <div id="content"></div>
    </div>
    <div id="footer"></div>
</div>

css

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    background-color: #222;
}

#container {
    margin: 0 auto;
    height: 100%;
    width: 800px;
    margin-top: 20px;
    background-color: black;
}

#banner {
    width: 100%;
    height: 100px;
    background-color: red;
}

#main {
    height: 100%;
    width: 100%;
}

#nav1 {
    height: 100%;
    width: 150px;
    float: left;
    background-color: yellow;
}

#nav2 {
    height: 100%;
    width: 100px;
    float: right;
    background-color: yellow;
}

#content {
    height: 100%;
    width: 100%;
    background-color: white;
}

#footer {
    width: 100%;
    height: 30px;
    background-color: lime;
}

jsfiddle：http://jsfiddle.net/gLhd6sno/1/

滚动时，我只想移动白色区域中的内容，我也不知道如何在不破坏布局的情况下禁用溢出。也许你有一个想法？谢谢。

【问题讨论】：

标签： css layout fixed

【解决方案1】：

这是一种依赖绝对定位的方法。

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    background-color: #222;
    margin: 0;
}

#container {
    width: 800px;
    left: 50%;
    margin-left: -400px;
    background-color: black;
    position: absolute;
    top: 20px;
    bottom: 0;
}

#banner {
    width: 100%;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 0;
}

#main {
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 30px;
}

#nav1 {
    width: 150px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: yellow;
    border: 2px dotted blue;
}

#nav2 {
    width: 100px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: yellow;
    border: 2px dotted blue;
}

#content {
    position: absolute;
    top: 0;
    bottom: 0px;
    left: 150px;
    right: 100px;
    background-color: tan;
    border: 2px dotted blue;
    overflow: auto;
}

#footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 30px;
    background-color: lime;
}

查看演示：http://jsfiddle.net/audetwebdesign/k9nsvt3t/

如果你缩小高度，你会看到内容区域周围出现一个滚动条，这可能会奏效。其余页面元素是静态的，无论主要区域的内容量。

【讨论】：