CSS 100% 宽度大于 100%答案

【问题标题】：CSS 100% width is more that 100%CSS 100% 宽度大于 100%
【发布时间】：2014-11-18 03:35:07
【问题描述】：

我正在学习 CSS，并尝试创建一个简单的布局。

我将“标题”设置为 100% 的宽度，将“左侧”设置为 20% 的宽度，将“右侧”设置为 80%。但是header的宽度大于左右的总宽度。为什么会这样以及如何解决？

    div {
        border-radius: 10px;
    }
    
    #header {
        z-index: 1;
        background-color: #80B7ED;
        height: 50px;
    	width: 100%;
        position: fixed;
    }
    
    .left {
        background-color: #5A9DE0;
        height: 400px;
        width: 20%;
        float: left;
        position: relative;
    }
    
    .right {
        background-color: #BFD9F2;
        height: 400px;
        width: 80%;
        float: right;
        position: relative;
    }
    
    #footer {
        background-color: #80B7ED;
        clear: both;
        height:70px;
    }

    <!DOCTYPE html>
    <html>
    	<head>
    		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    		<title></title>
    	</head>
    	<body>
    	    <div id="header">
    	    </div>
    	    <div class="left">
    	    </div>
    	    <div class="right">
    	    </div>
    	    <div id="footer">
    	    </div>
        </body>
    </html>

编辑

感谢您的回答和一些阅读，我现在知道问题出在正文部分的边缘。当我使用 body {margin: 0;} 时，“left”加上“right”在页面中占据较大的位置，而“header”占据较小的位置，因此它们的宽度相等。

另一个具有相同结果的解决方案是在“left: 0; right: 0; position: absolute;”的所有内容周围添加一个“容器” div。

我理解为什么这些解决方案使“左”加“右”更大（所以他们占据了整个页面），我不明白的是为什么“标题”突然变小了 .如果固定的“标题”超出常规流程，为什么更改正文的边距会影响它？

body {
    margin: 0;
}

div {
    border-radius: 10px;
}

#header {
    z-index: 1;
    background-color: #80B7ED;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    top: 0;
    height: 50px;
	width: 100%;
    position: fixed;
}

.left {
    background-color: #5A9DE0;
    height: 400px;
    width: 20%;
    float: left;
    position: relative;
}

.right {
    background-color: #BFD9F2;
    height: 400px;
    width: 80%;
    float: right;
    position: relative;
}

#footer {
    background-color: #80B7ED;
    clear: both;
    height:70px;
}

<!DOCTYPE html>
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title></title>
  </head>
  <body>
    <div id="header">
    </div>
    <div class="left">
    </div>
    <div class="right">
    </div>
    <div id="footer">
    </div>
  </body>
</html>

谢谢

【问题讨论】：

margins - 默认情况下不包括在宽度计算中。例如一个盒子的全宽是leftmargin + leftpadding + box width + rightpadding + rightmargin。
@MarcB 这里没有边距吗？但这确实也是经典
总是有默认边距，除非您在某处使用 CSS 重置。
这个link 将帮助你更多地了解 CSS 盒子模型
感谢 cmets。我添加了边距：0；填充：0；边框：无；到 div 选择器，它仍然不起作用。

标签： html css layout width stylesheet

【解决方案1】：

另一种方法是将overflow: hidden; 用于父div，将width:100%; 设置为子元素。这样会隐藏更多的宽度。

【讨论】：

【解决方案2】：

当使用百分比宽度时，margin、padding 和 border 不包括在计算中。所以你要确保所有这些在相应的元素上都设置为 0。

margin: 0;
padding: 0;
border: none;

或者，您可以使用box-sizing 属性，这将使计算包括padding 和border。那么你只需要考虑其他地方的利润。

box-sizing: border-box;

【讨论】：

不是他要的。他的 CSS 中没有设置边距、填充或边框。见这里jsfiddle.net/u3r2bm47
我希望固定位置，以便在页面滚动时保留标题。
嗯。这并不容易做到，我怀疑会有一个干净的跨浏览器解决方案。你可以只设置标题的宽度而不是使用百分比吗？如果您需要它响应，您可以使用 Javascript 来检查主要部分的宽度并将其设置为相等.. 有点 hacky.. 但它会工作。
hmmm 我可以这样做.. 我只是好奇，为什么当我将宽度设置为 100% 并将位置设置为固定时它不起作用
因为当您将位置设置为固定时，它会将该元素从流中取出，因此它不再受任何其他元素的约束。它唯一的容器现在是视口，就它而言，所有其他容器都不再存在。这是W3C documentation。可能值得快速阅读。

【解决方案3】：

给你：

body{
    margin:0px;
}
div {
    border-radius: 10px;
}
#wrapper {
    padding: 0%;
}
#wrap {
    float: left;
    position: relative;
    width: 100%;
}
#header {
    position:fixed;
    width:inherit;
    z-index:1;
    padding:0px;
    height:50px;
    border-radius:10px;
    background-color: #80B7ED;
}
.left {
    background-color: #5A9DE0;
    height: 400px;
    width: 20%;
    float: left;
    position: relative;
}
.right {
    background-color: #BFD9F2;
    height: 400px;
    width: 80%;
    float: right;
    position: relative;
}
#footer {
    background-color: #80B7ED;
    clear: both;
    height:70px;
}

<html>
<body>
<div id="wrapper">
    <div id="wrap">
        <div id="header"></div>
    </div>
</div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>

请看这里jsfiddle

编辑：

如果您想添加边距，我建议您添加一个可变边距，例如 2% 或 3%，然后从左列、右列中减去该数量，或两者。然后将#wrapp 的宽度设置为 100-2*x %，其中 x 是您添加的边距。

【讨论】：

哎呀....刚刚意识到它适用于 jsfiddle 但不是在这里。我会进一步调查。
在我的浏览器中也不起作用（firefox）.. 谢谢
我不知道为什么它在 jsfiddle 中工作......我会继续调查。
好的，我有最终的解决方案。事实证明@Jmh2013 是对的，正文应用了默认边距。在 css 中将 margin: 0px; 添加到正文中可以解决问题。