Question

我有兴趣构建一个带有页眉，页脚和div #main的css布局，用于单页应用程序/站点。我希望支持所有主流浏览器IE9及以及所有移动浏览器/移动网络浏览（适用于混合应用）。

我需要将标题粘贴到窗口视图的顶部（足够简单），页脚粘贴到窗口视图的底部（有点棘手但不太难），而div #main位于它们之间以适应他们不会占用的确切高度，并且可以滚动。＆＃39;问题是，我希望页眉和页脚中的字体大小在设备和浏览器之间有所不同，所以我无法确定它们的高度（我可以吗？）。如果是这样的话，我就无法设置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>

Answer 2

如果在页眉和页脚上使用position: fixed，它们将始终粘在屏幕的顶部和底部。你需要在身体的顶部和底部放一个垫子，以便隐藏它的一部分;使用visibility: hidden页眉和页脚的非固定副本应该可以正常工作。

示例：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body style="margin: 0;">
    <div style="position: fixed; top: 0;">Header</div>
    <div>
      <div style="visibility: hidden">Header</div>
      Lorem ipsum dolor sit amet
      <div style="visibility: hidden">Footer</div>
    </div>
    <div style="position: fixed; bottom: 0;">Footer</div>
  </body>
</html>

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

2 个答案:

Demo