页面 header 向右延伸到浏览器边缘，但主要 body 有一个间隙，导致外观不一致

Question

我正在为我的课程写一个网页，它是一个相当简单的页面，但我注意到一个我无法解决的问题，那就是网站的 header 一直延伸到边缘页面，但页脚和主 body 有一个白色 space 的间隙，这意味着它们不会突出到一边。不知道如何解决这个问题任何答案表示赞赏

这是我的代码的 pastebin，如果你想看一下，上半部分是 css 下半部分是 html http://pastebin.com/P86dFrcE

Answer 1

您需要将 box-sizing 添加到页眉，这样 width:100% 包含填充并且不会溢出页面。中间位置也不是问题。我会把它取出并保留为默认值 position:relative;

更多关于盒子尺寸的信息：http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

.header{
    min-height: 40px;
    margin-bottom: 5px;
    width:100%;
    box-sizing:border-box;
}