CSS Div宽度百分比和填充，不破坏布局 [英] CSS Div width percentage and padding without breaking layout

问题描述

这可能有一个简单的解决方案，但它困扰我很多年了...

There may be a simple fix for this, but it has troubled me for ages now...

让我解释一下情况。我有一个div，ID'container'，包含页面中的所有内容（包括页眉和页脚也），将保持一切内联，我可以做只是一个简单的margin：0 auto;'而不是倍数。所以让我说我的#container的宽度设置为80％。现在如果我把另一个div放在相同的宽度（80％），并给它的ID'header'与10px padding全部，布局将打破（可以说），因为页面添加填充量宽度。所以，我怎么能让它保持边界而不使用方法，如更低的百分比为#header div？基本上，我想让它流动。

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.

以下是一些示例代码，让您了解我在说什么...

Here is some example code to give you an idea of what I am talking about...

CSS

#container {
    position:relative;
    width:80%;
    height:auto;
}
#header {
    position:relative;
    width:80%;
    height:50px;
    padding:10px;
}

HTML

<div id="container">
    <div id="header">Header contents</div>
</div>

任何人都可以帮助我解决这个问题， $ b

Can anyone help me out with this issue that has been bugging me forever?

推荐答案

如果你希望 #header 与你的容器宽度相同， padding，你可以省略它的宽度声明。这将导致它隐式占用其整个父级的宽度（因为div默认是一个块级元素）。

If you want the #header to 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).

然后，由于你没有定义宽度，所以10px的填充将正确应用于元素内部，而不是添加到其宽度：

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:

#container {
    position: relative;
    width: 80%;
}

#header {
    position: relative;
    height: 50px;
    padding: 10px;
}

您可以看到 in action here 。

键在使用百分比宽度和像素填充/边距时不是在同一元素上定义它们（如果要精确控制尺寸）。将百分比宽度应用于父项，然后将像素填充/边距应用于未设置宽度的 display：block 子项。

The key when 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: block child with no width set.

更新

另一个处理方法是使用框大小 CSS规则：

Another option for dealing with this is to use the box-sizing CSS rule:

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

这里是一篇关于 box-sizing works 。

这篇关于CSS Div宽度百分比和填充，不破坏布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！