CSS Div宽度百分比和填充而不破坏布局

Question

可能有一个简单的解决办法,但它已经困扰我多年了...

让我解释一下情况.我有一个ID为'容器'的div,它包含页面中的所有内容(包括页眉和页脚),这些内容将保持所有内联,我只能做一个简单的'margin:0 auto;' 而不是倍数.所以我要说#container的宽度设置为80%.现在,如果我将另一个div放入相同的宽度(80%)并给它带有'10'的填充的'标题'的ID,布局将"破坏"(可以这么说)因为页面添加了填充量宽度.那么,如何在不使用#header div的较低百分比等方法的情况下使其保持入境？基本上,我想让它变得流畅.

这里有一些示例代码可以让您了解我在说什么......

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>

任何人都可以帮助我解决这个一直困扰着我的问题吗？

Answer 1

如果你想要与#header容器的宽度相同,使用10px的填充,你可以省略它的宽度声明.这将导致它隐式占用其整个父级的宽度(因为div默认为块级元素).

然后,由于您没有在其上定义宽度,因此10px的填充将正确应用于元素内部,而不是添加到其宽度:

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

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

你可以在这里看到它.

使用百分比宽度和像素填充/边距时的关键不是在同一元素上定义它们(如果要精确控制大小).将百分比宽度应用于父级,然后将像素填充/边距应用于display: block未设置宽度的子级.

更新

处理此问题的另一个选择是使用box-sizing CSS规则:

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

这是一篇关于盒子大小如何工作的帖子.

Answer 2

您还可以使用 CSS calc()函数从容器宽度的百分比中减去填充的宽度。

一个例子：

width: calc((100%) - (32px))

只要确保减去的宽度等于总填充，而不仅仅是一半。如果用 16px 填充内部 div 的两侧，那么您应该从最终宽度中减去 32px，假设下面的示例是您想要实现的。

width: calc((100%) - (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));
}