css - 高度为 : 100%; & wrapper element – content overlaps 的 block 元素

Question

我正在尝试弄清楚如何将 HTML5 标记与我网站的布局相结合，但这并没有按预期工作。

我网站的标题设置为 height: 100% 以填满整个屏幕:Fiddle .

现在，根据HTML5 Spec , main 元素应用于标记网站的主要部分:

The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

这就是我的麻烦开始的地方。
一旦我添加 main 元素或任何其他 block 元素来包装我的内容，标题就不再具有正确的高度:Fiddle

我知道这是因为 header 上的 height: 100%; 指的是父元素——本例中的 main 元素。由于没有声明高度，height: 100%; 规则没有引用。

要解决此问题，我还必须在 main 元素上声明 height: 100%:Fiddle

现在的问题是:由于 main 元素用于标记页面的主要内容，因此导航和页脚元素不属于其中:

The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or applications main function is that of a search form).

如果我在 main 元素下方添加内容，该内容会与 main 元素重叠，因为它填满了所有可用空间:Fiddle

我已经尝试过在页脚上设置各种高度声明，但没有任何运气。

此外，我尝试了各种 overflow 声明，但收效有限(双滚动条):Fiddle

是否有解决办法——如果标记与布局不兼容会很遗憾吗？

Answer 1

老实说，你的 fiddle 真的到处都是。这主要是由于您嵌套了并非设计用于嵌套的元素。 (即标题应该在你的主目录中，它们应该在它上面，等等)。

你的结构应该是这样的:

<header>
</header>

<main>
</main>

<footer>
</footer>

Fiddle example

---

然后您需要查看您的页面定位。

因此，页眉始终位于顶部，而您的页脚始终位于“主体的底部”。由于我只在我的主体上放置了一个 min-height，这应该可以解决“重叠”的问题(因为主体会自动达到它需要的高度)。

因此，您需要设置标题的高度

header,footer{
  background:red;
  height:150px;
  }

main{
  min-height:100%;
  }

<header>head</header>
<main>main content</main>
<footer>footer</footer>

---

因此，您的整体标记将类似于:

this fiddle

或者，或者:

这段代码:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.myHeader {
  background-color: red;
  height: 150px;
}
footer {
  background: blue;
  height: 150px;
}
main {
  min-height: 100%;
}

<header>
  <div class="myHeader"> <b>Header</b>

  </div>
</header>
<main>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</main>
<footer>
  <p>Footer Content</p>
</footer>