html - 当存在静态页眉/页脚时，将滚动条限制在内容区域

Question

有一个带有静态页眉和页脚的网页示例: Site Link (查看此网页时，请单击右上角的红色“X”删除透明的 archive.org header )

我的问题是，是否可以(轻松)将滚动条限制在实际(可滚动内容)区域——换句话说，滚动条不应延伸到静态页眉和页脚(就像现在一样)。

Here is a jsfiddle显示相同的内容:带有静态页眉和页脚的可滚动内容，其中滚动条越过页眉和页脚，但应限于内容框:

#content {
width: 1024px;
margin: 0 auto;
padding: 60px 0;
height:calc(100% - 120px);
}

这是当前实现的示例:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color:#ff00ff;
    margin:0px auto;
}
.wrapper {
    width:100%;
    height:100%;
}
.container {
    width:1024px;
    margin:0px auto;
    height:100%;
}
header {
    width: 1024px;
    height: 60px;
    background: red;
    position: fixed;
    top: 0;
}
#content {
    width: 1024px;
    margin: 0 auto;
    padding: 60px 0;
    height:calc(100% - 120px);
    background-color:#fff;
}
footer {
    width: 1024px;
    height: 60px;
    background: red;
    position: fixed;
    bottom: 0;
}

<div class="wrapper">
    <div class="container">
        <header></header>
        <div id="content">
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLOWEEN</p>
        </div>
        <footer></footer>
    </div>
</div>

Answer 1

您可以拥有一个可滚动的内容 Pane ，方法是在 #content 上使用:overflow: auto;。 这是您的 css 的更改版本，可帮助您解决当前的问题:

html, body {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    background-color:#ff00ff;
}
.wrapper {
    width:1024px;
    height: inherit;
}
.container {
    margin:0 auto;
    height: inherit;
}
header {
    height: 60px;
    background: red;
}
#content {
    margin: 0 auto;
    padding: 0;
    height:calc(100% - 120px);
    background-color:#fff;
    overflow: auto; 
}
footer {
    height: 60px;
    background: red;
}

<div class="wrapper">
    <div class="container">
        <header></header>
        <div id="content">
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLO</p>
            <p>HELLOWEEN</p>
        </div>
        <footer></footer>
    </div>
</div>

这里还有 jsFiddle:http://jsfiddle.net/7S4Xx/271/