logo标签列表

CSS百分百宽度大于100%的问题

htmlcsslayoutwidthstylesheet
4
我正在学习CSS并尝试创建一个简单的布局。
我将"header"设置为100%的宽度，"left"设置为20%的宽度，"right"设置为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:0; right:0; position:absolute;”属性的“容器”div，带来相同的结果。

I understand why these solutions make the "left" plus the "right" bigger (so they take the whole page), what I don't get is why the "header" is suddenly smaller. If the fixed "header" is out of the regular flow, why changing the margin of the body influeces it? 

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>

谢谢

@MarcB 这里没有涉及到边距吗？但确实这也是一个经典。 - Laurent S.
这个链接将帮助您更好地了解CSS盒模型。 - GeekByDesign
感谢您的评论。我已经在div选择器中添加了margin: 0; padding: 0; border: none;，但仍然无法正常工作。 - Ella Sharakanski
修改了问题。为什么页眉的宽度比整个页面还要大？ - Ella Sharakanski
@Ella Shar：针对你最新的问题，标题的宽度是在应用正文边距之前计算的，因为它的定位是“固定的”。如果你想要能够应用边距并正确计算标题，请阅读我答案的最新编辑。 - tfrascaroli
显示剩余2条评论
3个回答
9
使用百分比宽度时，不会考虑margin、padding和border的计算。因此，需要确保对应元素上的所有这些值都设置为0。
margin: 0;
padding: 0;
border: none;

或者，您可以使用box-sizing属性，这将使计算包括padding和border。然后您只需在其他地方考虑边距即可。

box-sizing: border-box;
不是他要求的。他在CSS中没有设置任何边距、填充或边框。请参见此处http://jsfiddle.net/u3r2bm47/。 - tfrascaroli
我希望位置固定，这样当页面滚动时标题也能保持不变。 - Ella Sharakanski
嗯，那不容易做到，我怀疑不会有一个干净的跨浏览器解决方案。你能否尝试直接设置标题的宽度而不使用百分比？如果您需要响应式设计，可以使用Javascript检查主要部分的宽度并将其设置为相等。虽然有点hacky..但它会起作用。 - Jmh2013
嗯，我可以做到这一点...我只是好奇，为什么当我将宽度设置为100％并将位置设置为固定时它不起作用。 - Ella Sharakanski
2
因为当你将位置设置为固定时，它会将该元素从流中移除，因此不再受任何其他元素的限制。它唯一的容器现在是视口，所有其他元素对它来说都不存在了。这里是W3C文档，值得快速阅读。 - Jmh2013
1

Here you go: 

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是您添加的边距量。

1
糟糕...刚刚意识到它在jsfiddle上可以运行，但在这里不行。我会进一步调查。 - tfrascaroli
我的浏览器（火狐）也不行...谢谢 - Ella Sharakanski
我不知道为什么它在 jsfiddle 上能正常运行... 我会继续调查。 - tfrascaroli
好的，我有最终解决方案了。原来@Jmh2013是对的，body上应用了默认的margin。在css中添加margin: 0px;到body可以解决这个问题。 - tfrascaroli
1
另一种方法是使用overflow: hidden;来设置父级div，并为子元素设置width:100%;。这样，更多的宽度将被隐藏。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接