HTML

Question

假设我有以下布局（图 1）。我的页眉总是在顶部，页脚总是在底部。内容应 100% 填充页眉和页脚之间的 space（图 2）。此外，我希望页眉、内容和页脚的内容水平居中，它仅使用 550px（图 3）。

图 1 :

!

图 2 :

!

图 3 :

!

想不出如何使用纯 css 来实现这一点。我无法将固定的 header/footer 与居中的包装器合并。任何想法，将不胜感激！谢谢

Answer 1

您需要添加一个指定元素宽度的内部元素。所以像这样的东西会为你想要实现的目标工作：

HTML:

<div id="wrapper">
    <header id="page-header">
        <div class="inner">
            Centered
        </div>
    </header>
    <div id="page-content">
        <div class="inner">
           Centered
        </div>
    </div>
    <footer id="page-footer">
        <div class="inner">
            Centered
        </div>
    </footer>
</div>

CSS:

#page-header,
#page-footer {
    position: fixed;
    width: 100%;
    left: 0;
    background: #ccc;
}

#page-header {
    top: 0;
    height: 100px;
}

#page-footer {
    bottom: 0;
    height: 75px;
}

#page-content {
    padding: 100px 0 75px;
}

.inner {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background: orange;
}

jsFiddle Demo

Answer 2

如果我答对了你的问题：

虚拟结构 - HTML

<header>
 <div class="container">
  HEADER CONTENT
 </div>
</header>
<section>
 <div class="container orange">
   content
 </div>
</section>
<footer>
 <div class="container">
   footer content
 </div>
</footer>

CSS 以上代码

body {padding-top:50px;padding-bottom:100px;}
header,footer {background:#D2D2D2;position:fixed;left:0;right:0;width:100%;}
header {top:0;height:50px;}
.container {width:550px;margin-left:auto;margin-right:auto;}
.orange {background:orange;}
footer {height:100px;bottom:0;}

Answer 3

其实很简单：https://jsfiddle.net/xpp6a6rf/

您可能想要编辑的内容是 header、footer 和 .inner 元素的 height 和 line-height 以及 max-width 共 .page

一定要用box-sizing:border-box

HTML - 固定页眉和页脚，水平居中布局

HTML - Fixed header & footer, horizontally centered layout

css

wrapper