滚动条在具有固定页眉和页脚的div中无法正常工作

Question

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

我正在尝试的内容与How to get a scrollbar in a div with fixed header and footer?

类似

但我无法让它正常工作。

我正在尝试的JS小提琴

Fiddle

我可以通过提供body{height: 84%;}来实现它，但在不同的浏览器中会有所不同。

Answer 1

修改

现在jsfiddle回来了......

这是您想要的 updated fiddle

以下是必要的主要变化：

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

Answer 2

这个问题有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;
}

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