54

可能有一个简单的解决方法,但它已经困扰我很久了......

让我解释一下情况。我有一个 ID 为“容器”的 div,它包含页面中的所有内容(也包括页眉和页脚),这将使所有内容保持内联,我只需执行 1 个简单的“边距:0 自动;” 而不是倍数。因此,假设我将#container 的宽度设置为 80%。现在,如果我将另一个具有相同宽度 (80%) 的 div 放入其中,并为其指定 'header' 的 ID,四周有 10px 的填充,则布局将“中断”(可以这么说),因为页面将填充量添加到宽度。那么,如何在不使用#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>

谁能帮我解决这个一直困扰着我的问题?

4

3 回答 3

95

如果您希望 与#header容器的宽度相同,填充为 10 像素,则可以省略其宽度声明。这将导致它隐式占用其整个父级的宽度(因为 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;
}

这是一篇关于box-sizing 如何工作的帖子。

于 2010-08-22T13:01:00.233 回答
5

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

一个例子:

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

只要确保减去的宽度等于总填充,而不是一半。如果你用 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>

于 2018-04-28T15:20:32.140 回答
2

尝试删除positionfromheader并添加overflowcontainer

#container {
    position:relative;
    width:80%;
    height:auto;
    overflow:auto;
}
#header {
    width:80%;
    height:50px;
    padding:10px;
}
于 2010-08-21T20:42:54.513 回答