Question

我有一个我正在处理的网页。它有一个固定的页眉和页脚，只有身体元素才会滚动。当需要滚动条的页面被拉起时，滚动条将页眉和页脚中的元素推向左侧。是否有一种方法可以使滚动条仅显示在＆＃34;可滚动的＆＃34;网页的一部分，并没有垂直到达页眉和页脚元素？

示例（＆＃34; S＆＃34;表示仅在body元素中的滚动条）：

+----------------------------------------------------------+
| This is the Header                                       |
+----------------------------------------------------------+
| This is the body with scroll-able content.              S|
|                                                         S|
|                                                         S|
|                                                         S|
|                                                         S|
+----------------------------------------------------------+
| This is the Footer                                       |
+----------------------------------------------------------+

如果您需要查看任何HTML或任何内容，请告知我们。我不确定这个问题是否有必要。

更新以下是我尝试的简化版本。页眉和页脚保持在我想要的位置，但是身体仍然没有滚动：

Link to Attempt on JS Fiddle

Answer 1

如果页眉和页脚的高度可以修正：

#header, #footer, #body {
    position: absolute;
    margin: 0;
    padding: 0;
}

#header {
    top: 0;
    height: 20px;
}

#footer {
    bottom: 0;
    height: 20px;
}

#body {
    top: 20px; /* #header height */
    bottom: 20px; /* #footer height */
    overflow: scroll;
}

查找overflow属性以控制滚动。

Answer 2

此处：FIDDLE

HTML：

<div class="container">
    <div class="header"></div>
    <div class="scrollable">

    </div>
    <div class="footer"></div>
</div>

的CSS：

* {
    padding:0;
    margin:0;
}
body {
    overflow:hidden;
}
.container
{
    width:100%;
    height:100%;
    background:green;
    position:absolute;
}
.header {
    width:100%;
    height:50px;
    background:red;
    top:0;
}
.footer {
    width:100%;
    height:50px;
    background:blue;
    bottom:0;
}
.scrollable {
    width:100%;
    height:calc(100% - 100px);
    background:yellow;
    overflow-y:scroll;
}

指定滚动条位置

2 个答案: