HTML5 &lt;header&gt;<div>&lt;footer&gt; 简单堆叠

Question

我现在已经为此苦苦挣扎太久了。

我想做的只是简单地堆叠后续内容，就像您将一张 1 列 3 行的表格一样。我试图放弃旧的 HTML 和 CSS 方法，转而采用首选的 HTML5 页面结构方法。

像这样...但没有任何重叠...

 ----------------------------
|    | header           |    |
|     ------------------     |
|    |                  |    |
|    | content          |    |
|    |                  |    |
|     ------------------     |
|    | footer           |    |
-----------------------------

发生的情况是页脚最终与内容重叠，并且内容比页面本身大(这是有道理的，因为它是 100%...)。我已经尝试了一些涉及“stickyfooter”的解决方法，但我似乎无法让它工作......我想我会从头开始 - 我应该知道什么？有什么明显的东西是我遗漏的吗？

CSS:

header{
background-color: #000000;
height: 200px;
width 1000px;
margin-left:auto;
margin-right:auto; 
}
.content{
background-color: #FFFFFF;
height: 100%;
margin-left:auto;
margin-right:auto; 
}
footer{
background-color: #000000;
width 1000px;
height: 200px;
margin-left:auto;
margin-right:auto; 
}

HTML:

<header>
 Header Content
</header>
<div class="content">
 Page Content goes here
</div>
<footer>
 Footer Content
</footer>

Answer 1

这是一个简单的 demo你想要完成的事情。

header, footer, .content {
  background: salmon;
  width: 500px;
  height: 100px;
  margin:0 auto;
}

.content{
  background: white; 
  min-height: 600px;
}

在您的代码中，您在 header 和 footer (width 1000px;) 中缺少冒号，并且您没有定义.content 的宽度。

您还可以将选择器与逗号组合，并使用 margin 简写。