html - 有没有办法创建一个可变宽度的页眉和页脚，中间有一个滚动的主 div？

Question

我对构建带有页眉、页脚和 div#main 的 css 布局很感兴趣，旨在用于单页应用程序/站点。我希望支持所有主流浏览器 IE9 及更高版本，以及所有移动浏览器/移动 WebView (用于混合应用程序)。

我需要将页眉粘贴到窗口 View 的顶部(足够简单)，将页脚粘贴到窗口 View 的底部(有点棘手，但不太难)，以及它们之间的 div#main以适应它们不占用的确切高度，并且“可滚动”。问题是，我希望页眉和页脚中的字体大小在设备和浏览器之间有所不同，所以我无法真正设置它们的高度(可以吗？)。如果是这样的话，我无法设置 div#main 的高度，这使得放置它变得非常困难。

任何帮助都会很棒!

Answer 1

您可以使用 position: absolute; 并在 % 中给出页脚和页眉高度；为它们制作 overflow: hidden 并为内容 div 制作 overflow: auto ，分配 top 和 bottom 等于宽度页眉和页脚。

Demo

CSS

body {
    height:100%;
    width:100%
}
#header {
    background: gray;
    position:absolute;
    top:0px;
    left:0px;
    height:10%;
    right:0px;
    overflow:hidden;
    text-align: center;
}
#content {
    background: #333;
    position:absolute;
    top:10%;
    bottom:10%;
    left:0px;
    right:0px;
    overflow:auto;
    text-align: center;
}
.test {
    height: 200px;
    width: 200px;
    margin: auto;
    background: red;
    text-align: center;
}
#footer {
    background: grey;
    position:absolute;
    bottom:0px;
    height:10%;
    left:0px;
    right:0px;
    overflow:hidden;
    text-align: center;
}

html

<div id="header">Header</div>
<div id="content">
    <p>
        test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    </p>
    <div class="test">
       test div
    </div>
     <p>
        test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    </p>
</div>
<div id="footer">Footer</div>