Question

我有页眉，页脚和内容。我希望我的内容（部分）总是在页眉和页脚之间使用滚动条（溢出：自动），高度应该是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>

如何使用滚动条在页眉和页脚之间制作100％的内容

3 个答案: