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：寬度如何以百分比形式工作？

回答

相關問題