高度为100％的块元素; ＆wrapper元素 - 内容重叠

问题描述：

我想弄清楚如何将HTML5标记&与我的网站的布局相结合，这不符合预期。高度为100％的块元素; ＆wrapper元素 - 内容重叠

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

现在，根据HTML5 Spec，所述main元件应该用于标记一个网站的主要部分：

主要元件代表一个文档或应用程序的主体的主要内容。主要内容区域由与文档的中心主题或应用程序的中心功能直接相关或扩展的内容组成。

这是我麻烦开始的地方。
当我加入main元素或缠上了我的内容的任何其他块元素，头不具备正确的高度了：Fiddle

我明白，这是因为在报头中的height: 100%;引用父 - 本例中的main元素。由于没有声明身高，height: 100%;规则没有提及。

为了解决这个问题，我必须声明height: 100%也main元素：Fiddle

现在的问题是：由于main元素是有来标记网页的主要内容，像导航&页脚元素不属于那里：

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

如果我添加了main元素下面的内容，这些内容重叠main元素，因为它填补所有可用空间：Fiddle

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

而且，我尝试过各种overflow声明，用有限的成功（双滚动条）：Fiddle

是否有一个修复 - 将是一种耻辱，如果标记不会与布局兼容？

我有点困惑你的实际目标是什么 - 可你光东西给我吗？ – 2015-01-21 11:27:04

你为什么要把标题放在主体中，为什么你的标题要达到100％的高度？ – Pete 2015-01-21 11:28:51

答

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

你的结构应该是这样的：

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

高度为100％的块元素; ＆wrapper元素 - 内容重叠

相关推荐