CSS：宽度如何以百分比表示？

Question

我遇到了一个我认为很奇怪的问题。我有一个 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 有一个固定的位置。

Answer 1

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

在这种情况下：

• parent-div 肯定会与页面一样宽，即 100%。
• 子元素也将与页面一样宽，即 100%，并且位于父级 div 内部，
• 同级元素的宽度为 250px 并位于子元素下方

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

Answer 2

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

内边距、边距和边框 http://img524.imageshack.us/img524/5211/capturedcran20100204173 .png

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

从嵌套元素中，您只能占用实际元素大小。父级上的 Padding 将导致嵌套项目保留边距。这意味着嵌套边界与其父级边界之间可能仍然存在空间。

如果您希望嵌套的

占据其所能占用的所有空间，则必须将其 margin 属性设置为 0px，并且 <其父级的 code>padding 属性也设置为 0px 。

Answer 3

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

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

请参阅：相对定位内的绝对定位了解更多说明。

谢谢

Answer 4

正如 zneak 指出的，不要忘记重置 css 盒子模型；请参阅这篇关于理解盒模型的精彩文章。

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

只是要指出，不要忘记设置，

#child-element {
    display: block;
}

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

我无法复制你的问题，一切都很好。