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

我正在建立一个网站，但div的滚动条遇到一些问题。我有固定的页眉和页脚，并且两者之间的div必须位于页眉和页脚之间。如果发生溢出，将显示滚动条。

我正在尝试的类似于How to get a scrollbar in a div with fixed header and footer?

但是我无法使其正常工作。

我正在尝试的JS小提琴

Fiddle

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

最佳答案

编辑：

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

关于html - 滚动条在带有固定页眉和页脚的div中无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18183243/