CSS Div 宽度百分比和填充而不破坏布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3538875/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Div width percentage and padding without breaking layout
提问by Kyle Ross
There may be a simple fix for this, but it has troubled me for ages now...
可能有一个简单的解决方法，但它已经困扰了我多年......
Let me explain the situation. I have a div with the ID 'container' that holds all the contents in the page (including header and footer also) that will keep everything inline and I can do just 1 simple 'margin:0 auto;' instead of multiples. So lets say that I have the width of #container set to 80%. Now if I put another div inside with the same width (80%) and give it the ID of 'header' with 10px of padding all around, the layout would "break" (so to speak) because the page adds the padding amount onto the width. So, how can I make it stay in-bounds without using methods such as a lower percentage for the #header div? Basically, I want to make it fluid.
让我解释一下情况。我有一个 ID 为“容器”的 div，它包含页面中的所有内容（也包括页眉和页脚），它将使所有内容保持内联，我只能做 1 个简单的 'margin:0 auto;' 而不是倍数。所以可以说我将#container 的宽度设置为 80%。现在，如果我将另一个具有相同宽度 (80%) 的 div 放入其中，并为其提供带有 10px 填充的“header”ID，则布局将“中断”（可以这么说），因为页面将填充量添加到宽度。那么，如何在不使用 #header div 的较低百分比等方法的情况下使其保持在边界内？基本上，我想让它变得流畅。
Here is some example code to give you an idea of what I am talking about...
这是一些示例代码，让您了解我在说什么......
CSS
CSS
#container {
position:relative;
width:80%;
height:auto;
}
#header {
position:relative;
width:80%;
height:50px;
padding:10px;
}
HTML
HTML
<div id="container">
<div id="header">Header contents</div>
</div>
Can anyone help me out with this issue that has been bugging me forever?
任何人都可以帮助我解决这个一直困扰我的问题吗？
回答by Pat
If you want the #headerto be the same width as your container, with 10px of padding, you can leave out its width declaration. That will cause it to implicitly take up its entire parent's width (since a div is by default a block level element).
如果您希望 与#header容器的宽度相同，填充 10 像素，则可以省略其宽度声明。这将导致它隐式占据其整个父级的宽度（因为默认情况下 div 是块级元素）。
Then, since you haven't defined a width on it, the 10px of padding will be properly applied inside the element, rather than adding to its width:
然后，由于您还没有在其上定义宽度，10px 的内边距将正确应用于元素内部，而不是添加到其宽度：
#container {
position: relative;
width: 80%;
}
#header {
position: relative;
height: 50px;
padding: 10px;
}
You can see it in action here.
The keywhen using percentage widths and pixel padding/margins is not to define them on the same element (if you want to accurately control the size). Apply the percentage width to the parent and then the pixel padding/margin to a display: blockchild with no width set.
使用百分比宽度和像素填充/边距时的关键是不要在同一元素上定义它们（如果您想准确控制大小）。将百分比宽度应用于父级，然后将像素填充/边距应用于display: block未设置宽度的子级。
Update
更新
Another option for dealing with this is to use the box-sizingCSS rule:
处理这个问题的另一个选择是使用box-sizingCSS 规则：
#container {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
/* Since this element now uses border-box sizing, the 10px of horizontal
padding will be drawn inside the 80% width */
width: 80%;
padding: 0 10px;
}
Here's a post talking about how box-sizing works.
这是一篇讨论box-sizing如何工作的帖子。
回答by Ian Gradert
You can also use the CSS calc()function to subtract the width of your padding from the percentage of your container's width.
您还可以使用 CSS calc()函数从容器宽度的百分比中减去填充的宽度。
An example:
一个例子：
width: calc((100%) - (32px))
Just be sure to make the subtracted width equal to the total padding, not just one half. If you pad both sides of the inner div with 16px, then you should subtract 32px from the final width, assuming that the example below is what you want to achieve.
只要确保减去的宽度等于总填充，而不仅仅是一半。如果用 16px 填充内部 div 的两侧，那么您应该从最终宽度中减去 32px，假设下面的示例是您想要实现的。
.outer {
width: 200px;
height: 120px;
background-color: black;
}
.inner {
height: 40px;
top: 30px;
position: relative;
padding: 16px;
background-color: teal;
}
#inner-1 {
width: 100%;
}
#inner-2 {
width: calc((100%) - (32px));
}<div class="outer" id="outer-1">
<div class="inner" id="inner-1"> width of 100% </div>
</div>
<br>
<br>
<div class="outer" id="outer-2">
<div class="inner" id="inner-2"> width of 100% - 16px </div>
</div>回答by Sarfraz
Try removing the positionfrom headerand add overflowto container:
尝试删除positionfromheader并添加overflow到container：
#container {
position:relative;
width:80%;
height:auto;
overflow:auto;
}
#header {
width:80%;
height:50px;
padding:10px;
}
