CSS：宽度如何以百分比形式工作？答案

【问题标题】：CSS: How does Width work as a percentage?CSS：宽度如何以百分比形式工作？
【发布时间】：2015-12-31 17:54:12
【问题描述】：

我遇到了我认为很奇怪的问题。我有一个 div，在父 div 内，我给子 div 的宽度为 100%，但它没有增长到父 div 的大小。

父 div 确实不具有任何类型的设置宽度。所以我的问题是：百分比宽度仅在父元素具有设定宽度时才有效，还是应该增长？

澄清：

有些人可能想知道如果父 div 本身没有设置宽度，那么它是如何有一个宽度可以增长的。原因是我在父 div 中还有其他子元素的兄弟元素，它们具有设置的宽度，因此父 div 已经增长到满足这些兄弟元素的宽度。

代码示例：

<div id="parent-div">
    <div id="child-element" style="width: 100%">Content</div>
    <div id="sibling" style="width: 250px"></div>
</div>

子元素没有增长到满足父 div。 100% 的宽度基本上没有做任何我能说的事情。这是在 IE7 中。

谢谢。

跟进：感谢大家的回答。我正忙着测试。我最初认为父 div 只会像他们的孩子一样宽，但事实证明，鉴于上面的示例，我错了，我编写代码只是为了证明我遇到的问题。就我而言，我的父 div 应用了 position: fixed 和 bottom: 1px 和 right: 1px。从我的测试来看，这似乎改变了父 div 的行为。它不再自动拉伸到页面的整个宽度，而是假设我认为无论如何都是这种情况，即父 div 仅扩展至足以容纳其最宽的子元素。这就是我现在看到的行为，但这只是因为我的父 div 有一个固定的位置。

【问题讨论】：

请发布您使用的实际 html 和 css。
你能发布你的代码，或者至少是它的一个示例吗？如果您能看到自己在做什么，则排除故障会容易得多...
一个div总是100%的宽度开始；直到你浮动它，绝对定位它等等。
没有完整的 html 和 css，这个问题根本没有任何意义，所有的答案都是猜测。赞成票是怎么回事？

标签： css width parent

【解决方案1】：

在没有看到您的 CSS 和 HTML 的其余部分的情况下，我将假设您发布的内容就是您的 HTML 和 CSS 中的全部内容。

在这种情况下：

parent-div 肯定会和页面一样宽，即 100%。
child-element 也将与页面一样宽，即 100%，并且在 parent-div 内
兄弟元素的宽度为 250 像素，位于子元素下方

如果不是这种情况，您有其他 HTML 或 CSS 干扰。

【讨论】：

@thus-sprach.. 如果不给父 div 一个宽度，它不会拉伸到页面的整个宽度。它只是增长到它需要增长以容纳它的孩子的宽度。因此，在这种情况下，父 div 是 250px 宽，因为它是具有设定宽度的子元素。问题是我的一个 100% 的 div 没有增长，大概是因为父 div 没有设置宽度。
@thus-sprach ：绝对正确，除非没有 html 标签并且它被呈现为文本 ;-)

【解决方案2】：

这实际上是一个 css 技巧。它是这样的：

如果您将父 div 的位置设置为相对而子 div 的位置设置为绝对，那么子 div 将保留在父 div 内，即使它们的位置是绝对的。

更多解释请见：Absolute Positioning Inside Relative Positioning。

谢谢

【讨论】：

你说得对，导致应用 100% 的宽度，但在我的特定情况下绝对定位并不实用。

【解决方案3】：

此屏幕截图说明了如何使用 CSS 衡量指标。对不起法国人，这是我电脑上的。

padding, margin and border http://img524.imageshack.us/img524/5211/capturedcran20100204173.png

其中“marge”表示margin，“bordure”表示border，“espacement”表示padding。 Margin 落在border 周围，而padding 又落在padding 周围，而padding 又落在实际元素大小附近。在这个例子中（通过检查堆栈溢出答案<textarea>标签得到）显示没有边距，边框为1px宽，<textarea>的边框与其内容之间有3px的填充；内容可以使用的大小（不包括填充）为 660x200。此大小与 CSS width 和 height 属性匹配。

从一个嵌套元素中，你只能占据实际元素的大小。父级上的Padding 将导致您的嵌套项目保持边距。这意味着您的嵌套边框与其父边框之间可能仍有空间。

如果您希望嵌套的<div> 占用所有空间，则必须将其margin 属性设置为0px，并将其父级的padding 属性设置为0px。

【讨论】：

【解决方案4】：

正如 zneak 指出的，不要忘记重置 css 盒子模型；见this great article on understanding the box model。

#parent div {
    padding: 0;
    margin: 0;
}

只是指出，别忘了设置

#child-element {
    display: block;
}

您可能已将其设置为 inline，因此它不会扩展到父级宽度的 100%。

我无法复制您的问题，一切正常。

【讨论】：