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

我有我认为是一个奇怪的问题。我有一个div，在父div里面，我给孩子div宽度为100％，但它不会增长到父div的大小。CSS：宽度如何以百分比形式工作？

父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中。

谢谢。

FOLLOW-UP：谢谢大家的回答。我正忙于测试我的结局。我原本以为父母div的长度和他们的孩子一样长，但事实证明我错了，因为我上面的例子只是为了演示我遇到的问题。在我的情况下，我的父div有一个position: fixed和bottom: 1px和right: 1px适用于它。从我的测试中，这似乎改变了父div的行为。它不再自动延伸到页面的整个宽度，而是假定我认为是这种情况的行为，这是父div的扩展只足以容纳其最广泛的孩子。所以这就是我现在看到的行为，但只是因为我的父母div有固定的位置。

来源

2010-02-04 Matt Powell

请发布您正在使用的实际html和css。 – glomad 2010-02-04 22:34:41

你可以发布你的代码，或者至少是它的一个样本吗？如果你能看到你在做什么，那么排除故障要容易得多...... – Martha 2010-02-04 22:34:57

你有没有例子？ – jeroen 2010-02-04 22:36:12

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

如果你设置父div的位置为relative并且子div的位置为absolute，那么子div将保留在父div的内部，即使它们的位置是绝对的。

参见：Absolute Positioning Inside Relative Positioning了解更多解释。

谢谢

来源

2010-02-04 22:42:26 Sarfraz

你是对的，导致100％的宽度被应用，但绝对定位在我的特殊情况下是不实际的。 – 2010-02-04 22:50:25

此屏幕截图解释了如何使用CSS度量指标。请原谅法语，它来自我的电脑。

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

其中， “玛吉” 的意思margin， “包边” 是指border和 “espacement” 是指padding。 Margin落在border的周围，其依次落在padding的周围，其依次落在实际元素的大小周围。在这个例子中（这是通过检查堆栈溢出回答<textarea>标签得出的）显示没有余量，边界宽度为1px，并且在<textarea>的边界与其内容之间有3px的填充;并且内容可以使用的大小（不包括填充）为660x200。此大小与CSS width和height属性相匹配。

从一个嵌套元素，你只能占用实际的元素大小。父母上的Padding将导致您的嵌套项目保留余量。这意味着您的嵌套边界与其父代的边界之间可能仍有空间。

如果你希望你的嵌套<div>采取所有房间也可以，你必须将其margin属性设置为0px，其父母0px的padding财产为好。

来源

2010-02-04 22:44:06 zneak

没有看到您的CSS和HTML的其余部分，我会假设您发布的内容都是HTML和CSS中的所有内容。

在这种情况下：

父 - DIV肯定会一样宽的页面，即100％。
子元素也将是一样宽的页面，即，100％，并且是父 - DIV中
同级将具有250像素的宽度和为子元素下方

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

来源

2010-02-04 22:50:04 Sarhanis

@如此sprach ..没有给父div一个宽度，它不伸展到页面的整个宽度。它只是增长到需要增长以容纳它的孩子。因此，在这种情况下，父div是250px宽，因为它是具有设定宽度的子项。问题是我的一个div 100％没有增长，大概是因为父div没有被给定一个宽度。 – 2010-02-04 22:55:22

@如此说来：绝对正确，除非没有html标签并且它被呈现为文本;-) – jeroen 2010-02-04 23:02:01

正如zneak指出的那样，别忘了重置css框模型;见this great article on understanding the box model。

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

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

#child-element { 
    display: block; 
}

正如你可能已经将其设置为直列一个也不会扩大到父母的宽度的100％。

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

来源

2010-02-04 22:55:09

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

回答

相关问题