Question

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

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

    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>

由于

Answer 1

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

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

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

box-sizing: border-box;

Answer 2

你走了：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

请参阅此处jsfiddle

修改：

如果您希望添加保证金，我建议您添加可变保证金，例如2％或3％，然后从左列中减去该数量，右栏，或两者兼而有之。然后将#wrapp的宽度设置为100-2 * x％，其中x是您添加的边距量。

Answer 3

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

CSS 100％宽度超过100％

3 个答案: