0

我正在建立一个网站，但我在使用 div 的滚动条时遇到了一些问题。我有一个固定的页眉和页脚，中间的 div 必须保持在页眉和页脚之间。如果溢出，将出现一个滚动条。

我正在尝试的类似于如何在具有固定页眉和页脚的 div 中获取滚动条？

但我不能让它正常工作。

我正在尝试的 JS 小提琴

小提琴

我可以通过给予使其工作，body{height: 84%;}但在不同的浏览器中会有所不同。

4

2 回答 2

1

编辑：

现在 jsfiddle 又回来了……

这是您想要的更新小提琴

以下是必要的主要更改：

div[role="main"]
{
    height: 100%;
    background: pink;
    margin: -70px 0 -30px;
    padding: 70px 0 30px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #4CD3BF;
}

做这样的事情：

内容不多：CODEPEN1

内容丰富： CODEPEN2

标记

<div class="container">
  <header></header>
  <div class="content"></div>
  <footer></footer>
</div>

CSS

/* 假设页眉和页脚高度为 64px */

.container
{
    height: 100%;
    background: pink;
    margin: -64px 0;
    padding: 64px 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content {
    overflow:auto;
    height:100%;
}
header
{
    height: 64px;
    background: purple;
    position: relative;
    z-index:1;
}
footer
{
    height: 64px;
    background: gray;
    position: relative;
    z-index:1;
}
于 2013-08-12T10:10:23.230 回答
0

这个问题有不止1个答案。最简单的方法是将主要内容（因此没有页眉和页脚）包装在绝对定位的 div 中。将 div 设置为页眉的底部，将底部设置为页脚的顶部，例如

小提琴：http: //jsbin.com/onipiq/2/edit

CSS：

body{
    margin: 0;
    padding: 0;
}
header{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100px;
    background: #eee;
}
footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: #eee;

}
.contentContainer{
    position: absolute;
    width: 100%;
    top: 100px;
    bottom: 100px;
    overflow-y: scroll;
}
.content{
    position: relative;
    width: 960px;
    margin: 0 auto;
}

请注意，此示例不会在大多数触摸设备上滚动，但可以在桌面上正常工作。

于 2013-08-12T10:29:51.483 回答