【问题标题】：Why <body> has the certain width, if there is no width property in css?如果css中没有width属性，为什么<body>有一定的宽度？
【发布时间】：2015-07-30 13:28:16
【问题描述】：

我有一个 100% 宽度的标题和下面的灰线。该行应使用浏览器窗口的 100% 宽度。但是当我减小浏览器宽度时，灰线不会占据网页的整个宽度。为什么？奇怪，但是一个body标签需要一定的宽度值，尽管在css中没有为body设置宽度。请检查下面的图片和代码。非常感谢！

如果缩小浏览器宽度，就会出现问题：右边没有灰色边框了！ https://drive.google.com/file/d/0B35EX-b9d628ZmxBWFJjOTF1eFU/view

这里是代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Max's Icebrrrg</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <header>
        <div class="headerInner">
            <div class="logo">
                <h1>Icebrrrg</h1>
            </div>
            <div class="mainNav">
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Three Column</a></li>
                    <li><a href="">Sidebar Right</a></li>
                    <li><a href="">Sidebar Left</a></li>
                    <li><a href="">Full Width</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </div>
        </div>
    </header>

    <div class="contentWrapper">

    </div>

    <footer>

    </footer>

</body>
</html>

CSS

* {
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
}

body {
    font: 14px/21px "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #444;
}



/******************** HEADER ************************/

header {
    border-bottom: 1px solid #E3E3E8;
    margin-bottom: 30px;
}

.headerInner {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
}

.logo {
    width: 157px;
    height: 63px;
    background: url(../img/icebrrrg-logo.png) no-repeat;
    background-size: contain;
    margin: 22px 0;
    float: left;
    display: inline;
}

.logo h1 {
    text-indent: -99999px;
}

.mainNav {
    float: right;
    display: inline;
}

.mainNav ul {
    margin: 44px 0;
    padding: 0;
    list-style: none;
}

li {
    display: inline;
}

.mainNav a {
    text-decoration: none;
    color: #2C88C9;
    padding: 48px 10px 43px;
    font-size: 12px;
    border-bottom: 3px solid white;
}

.mainNav a:hover {
    font-weight: bold;
    border-bottom: 3px solid #2C88C9;
}

【问题讨论】：

我在使用您的 HTML/CSS 组合的 JsFiddle 中没有看到问题：jsfiddle.net/57k17amb

标签： html css

【解决方案1】：

细的是你的.headerInner有一个固定的width: 960px和body以及<header>默认拉伸到屏幕的宽度所以当它小于960px时你的.headerInner溢出@ 987654329@

要修复它，只需将 border-bottom: 1px solid #E3E3E8; 从 <header> 移动到 .headerInner

Here a working jsfiddle example

或者将边框保留在原位并将width: 960px; 和margin: 0 auto 设置为header。

Here the jsfiddle in this way

如果您希望边框延伸到屏幕，请执行以下操作：

header {
    margin-bottom: 30px;
    min-width: 960px;    
    border-bottom: 1px solid #E3E3E8;
}

And here the jsfiddle for this one

【讨论】：

谢谢！但我需要灰线占据浏览器的整个 100% 宽度。如果我按照你提供的那样做，灰线将只有 960 像素！
@Max 我将我的答案更新为灰线以占据浏览器的整个 100% 宽度，如果现在可以正常工作，请告诉我。
很高兴为您提供帮助。

【解决方案2】：

您可以通过以下链接查看。我已经删除了下面提到的.logo h1相关的css。

http://jsfiddle.net/57k17amb/1/

.logo h1 {
    text-indent: -99999px;
}

【讨论】：

你没有解释任何事情。为什么要在答案中包含该 CSS？