如何使用滚动条使页眉和页脚之间的内容 100%

Question

我有页眉、页脚和内容。我希望我的内容（部分）始终位于页眉和带有滚动条的页脚 (overflow: auto) 之间，高度应为 100% 减去页眉和页脚。

我试过了：

html,body {
    margin: 0;
    height: 100%;
}
section {
    position: absolute;
    top: 0;
    bottom:0;
    box-sizing: border-box;
    padding: 100px 0;
    height: 100%;
    overflow: auto;
}

这是我的plunkr

Answer 1

这成功了

section {
  overflow: auto;
  position: absolute;
  top: 96px;
  bottom: 89px;
}

Answer 2

您已经接近了...您需要将<div> 绝对定位在该部分内，并对您的语法进行一些其他小的更改：

section {
   position: absolute;
   top: 80px;
   bottom:120px;
   left: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   width: 100%;
   overflow: auto;
}
section div {
    position: absolute;
    z-index:1;
    width: 100%;
    padding: 0;
}

可能应该稍微清理一下代码，但这应该会完成您正在寻找的页眉/页脚之间的滚动。

Answer 3

这是我为您构建的一个非常轻量级的解决方案，我想您可以在此基础上构建几乎任何东西，并对其进行修改以满足您的需求：

CSS

body {
    margin-top:50px;
}
.header-fixed, .footer-fixed {
    position:fixed;
    left:0px;
    width:100%;
    background:pink;
    padding:10px;
}
.header-fixed {
    top:0px;
    left:0px;
}
.footer-fixed {
    bottom:0px;
    left:0px;
}

HTML

<div class="header-fixed">Header</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat efficitur mollis. Quisque convallis ipsum nunc, id pulvinar neque interdum eget. Donec dignissim nec leo ac gravida. Cras dictum sapien eu mi dapibus pulvinar. Sed ut pretium nibh. Etiam vitae ultrices erat, nec finibus leo. Aliquam ultrices lectus ac nulla rhoncus accumsan. Pellentesque gravida, tellus id condimentum maximus, eros justo cursus tortor, sed ornare nisl est vel erat. Maecenas finibus nibh enim, vitae semper magna ornare sit amet. Integer ultricies rhoncus congue. Aliquam quis neque in nisi laoreet eleifend ac ac neque. Vivamus erat est, elementum sed urna ac, euismod aliquam tortor.
</p>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat efficitur mollis. Quisque convallis ipsum nunc, id pulvinar neque interdum eget. Donec dignissim nec leo ac gravida. Cras dictum sapien eu mi dapibus pulvinar. Sed ut pretium nibh. Etiam vitae ultrices erat, nec finibus leo. Aliquam ultrices lectus ac nulla rhoncus accumsan. Pellentesque gravida, tellus id condimentum maximus, eros justo cursus tortor, sed ornare nisl est vel erat. Maecenas finibus nibh enim, vitae semper magna ornare sit amet. Integer ultricies rhoncus congue. Aliquam quis neque in nisi laoreet eleifend ac ac neque. Vivamus erat est, elementum sed urna ac, euismod aliquam tortor.
</p>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat efficitur mollis. Quisque convallis ipsum nunc, id pulvinar neque interdum eget. Donec dignissim nec leo ac gravida. Cras dictum sapien eu mi dapibus pulvinar. Sed ut pretium nibh. Etiam vitae ultrices erat, nec finibus leo. Aliquam ultrices lectus ac nulla rhoncus accumsan. Pellentesque gravida, tellus id condimentum maximus, eros justo cursus tortor, sed ornare nisl est vel erat. Maecenas finibus nibh enim, vitae semper magna ornare sit amet. Integer ultricies rhoncus congue. Aliquam quis neque in nisi laoreet eleifend ac ac neque. Vivamus erat est, elementum sed urna ac, euismod aliquam tortor.
</p>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat efficitur mollis. Quisque convallis ipsum nunc, id pulvinar neque interdum eget. Donec dignissim nec leo ac gravida. Cras dictum sapien eu mi dapibus pulvinar. Sed ut pretium nibh. Etiam vitae ultrices erat, nec finibus leo. Aliquam ultrices lectus ac nulla rhoncus accumsan. Pellentesque gravida, tellus id condimentum maximus, eros justo cursus tortor, sed ornare nisl est vel erat. Maecenas finibus nibh enim, vitae semper magna ornare sit amet. Integer ultricies rhoncus congue. Aliquam quis neque in nisi laoreet eleifend ac ac neque. Vivamus erat est, elementum sed urna ac, euismod aliquam tortor.
</p>
<div class="footer-fixed">
    Footer
</div>