2016-08-19 78 views
0

基本布局是页脚标签违抗分配行为

<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%的空白区域。设置backround-color: yellow证实了这一点。最后,除非<myContent>将其推到屏幕视图的下方,否则该位置将无法进入底部。

这个设置有什么问题?

回答

0

在HTML5中,大多数不是专门在<head><body>元素中的所有内容(无论您是否实际声明)都被分配给适当的任何一个。如果必要元素不存在,则创建它。

根据the HTML5 spec,<html>,<head><body>是可选的。大多数浏览器根据需要创建缺少的元素。 (根据我的经验,主要关注表和<thead><tbody>。)

请注意,您使用浏览器的检查器看到的代码通常是浏览器在修复它从服务器获得的内容后处理的代码。

0

在HTML中,body标签包围页面的可见元素。 HTML具有HEAD元素,但该元素不适用于可见内容,适用于不可见元素,如指向样式表的链接等.FOOTER元素正确属于BODY元素。

0

的问题是,具有所述主体的外部的元件是无效的HTML。现代浏览器会纠正这一问题,并将其移入内部。

0

感谢上面关于页脚/身体位置的说明。最后我读了一个可以将页脚放在身体内部或外部的地方,但是你的评论已经被注意到了。

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