Question

我想弄清楚如何结合HTML5标记和放大器我的网站布局，没有按预期工作。

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

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

main元素表示文档或应用程序正文的主要内容。主要内容区域包含与文档中心主题或应用程序中心功能直接相关或扩展的内容。

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

我理解这是因为标头上的height: 100%;引用了父 - 本例中的main元素。由于没有声明高度，height: 100%;规则没有引用。

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

现在问题是：由于main元素用于标记页面的主要内容，因此导航＆amp;页脚元素不属于那里：

文档的主要内容区域包含该文档特有的内容，并且不包括在一组文档中重复的内容，例如网站导航链接，版权信息，网站徽标和横幅以及搜索表单（除非文档或应用程序的主要功能是搜索表单。）

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

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

另外，我尝试了各种overflow声明，但成效有限（双滚动条）：Fiddle

是否有解决方法 - 如果标记与布局不兼容，那将是一种耻辱吗？

Answer 1

你小提琴真的到处都是，我说实话。这主要是由于您嵌套的元素没有设计为嵌套。（即标题应该在你的主文件中，它们应该在它上面，等等）。

你的结构应该是这样的：

<header>
</header>

<main>
</main>

<footer>
</footer>

Fiddle example

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

因此，标题始终位于顶部，并且您的页脚始终位于主页的底部＆＃34;。由于我只在{main}上放置了min-height，因此这应该可以解决重叠＆＃39; （因为main将自动转到需要的高度）。

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

＆＃13;

header,footer{
  background:red;
  height:150px;
  }

main{
  min-height:100%;
  }

＆＃13;

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

＆＃13;

您的整体标记将类似于：

this fiddle

或者，或者：

此片段：

＆＃13;

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

＆＃13;

<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>

＆＃13;

块高：100％; ＆安培;包装元素 - 内容重叠

1 个答案: