Question

基本布局是

<body>
    <div class="wrapper">
        <nav></nav>
        <myContent></myContent>
    </div>
</body>
<footer></footer>

页脚应落在身体下方且不受身体或其子女的CSS影响。

无论身体包含多少内容或多少内容，我都希望页脚位于页面底部。这个CSS应该可以解决这个问题：

    body, html {
        height: 100vh;
        }
    .wrapper {
        min-height: 96vh;
        position: relative;
        }
    footer {
        width: 100%;
        height: 4vh;
        position: relative;
        bottom: 0;
        font-size: .75em;
        }

在浏览器中检查时，页脚包含在body标签中。这毫无意义。此外，页脚显示其宽度与视口相同，但不反映在演示模型中。相反，它的左边框位于页面的左侧，右边的空白区域大约有10％vw。设置backround-color: yellow确认了这一点。最后，除非<myContent>将其推到屏幕的视图下方，否则该位置无法进入底部。

这个设置出了什么问题？

Answer 1

在HTML中，body标签包含页面的可见元素。 HTML有一个HEAD元素，但该元素不适用于可见内容，它适用于非可见元素，例如样式表链接等。您的FOOTER元素正确属于BODY元素。

Answer 2

页脚标题和其他特定语义标记必须包含在body =＆gt;中http://www.w3schools.com/html/html5_semantic_elements.asp

Answer 3

问题是，身体外部的元素是无效的HTML。现代浏览器将对此进行校正并将此元素移入其中。

Answer 4

在HTML5中，大多数并非<head>或<body>元素中的所有内容，无论您是否实际声明它，都会被分配到适当的位置。如果必要的元素不存在，则创建它。

根据the HTML5 spec，<html>，<head>和<body>是可选的。大多数浏览器都会根据需要创建缺少的元素。（根据我的经验，我们通常会注意到表格以及<thead>和<tbody>。）

请注意，您使用浏览器检查程序看到的代码通常是浏览器在修复＆＃34;修复＆＃34;之后使用的代码。它是从服务器获得的。

Answer 5

感谢关于页脚/身体放置的上述说明。最后我读到一个可以将页脚放在身体内部或外部，但您的评论已被注意到。

我的页脚行为不端，因为检查器缩放索引页面已更改，但没有更改任何其他页面。我不知道这是怎么发生的，但重置将它放在需要的地方。

页脚标记违反指定的行为

5 个答案: