HTML/CSS：製作一個包裝以適應其子女的身高

我正在製作一個網站。所有內容都存儲在包裝DIV中。內容DIV具有分配給它的邊框樣式。HTML/CSS：製作一個包裝以適應其子女的身高

我想包裝DIV的高度足夠高，以適應它的內容，所以邊界到達頁面的末尾。

我以爲這會默認發生，因爲height:auto是所有元素的默認值。

這是我的page。

感謝您提供任何幫助。

來源

2013-07-25 big_smile

如果一個內容元素已'位置：fixed'？它們是否也會被扭曲？ –

你的意思是：http://stackoverflow.com/questions/10155344/auto-height-div-with-overflow-and-scroll-when-needed？ – Joum

@PeterRader。沒有位置：固定不應該被包裹。 Joum：不，我只想讓我的包裝在高度上膨脹以填充它的孩子。 –

如果我正確理解你，你想創建一個完整的高度的網站？如果是這樣，請嘗試sticky footer。

來源

2013-07-25 11:48:01 Pankucins

我只想將包裝高度展開以適合它的孩子。 –

html { 
    height: 100%; 
} 

body { 
    /* not height: 100%; otherwise you're 
    * fixing it to the height of the viewport 
    */ 
    min-height: 100%; 
} 

.wrapper { 
    /* some kind of clearfix is 
    * necessary because your content 
    * is floated 
    */ 
    overflow: hidden; 
}

來源

2013-07-25 11:51:33 jjenzz

我試過這個，但它只是隱藏了包裝之外的內容。 –

你需要身體的'身高：100％'關閉。確保它是'最小高度'而不是'高度'。強制高度意味着身體永遠不會與其中的內容高度相同，這就是爲什麼你的溢出隱藏內容。 – jjenzz

只需使用div來嵌套內容，並且「不要」給它任何高度。默認情況下，它將適合它的孩子。如有必要，你可以給display: block。

這裏是小提琴http://jsfiddle.net/8bP9b/

來源

2013-07-25 11:52:09

我在我的代碼上試過這個，但它不起作用。 –

我的建議：考慮重新設計你的頁面佈局。它會使它「穩定」和「更好」。 –

@blasteralfredΨ：您可以擴展您的意見。 –

只是要包裝的div風格

overflow: auto

來源

2013-07-25 11:53:51 mavili

流量：auto不會做任何事情。你的意思是溢出：自動 - 這增加了滾動條。（溢出：可見不會做任何事情，溢出：隱藏隱藏內容）。 –

是的，我的意思是溢出。改變了它。它應該真的擴展到其子女的內容 – mavili

我試圖添加溢出，但它什麼也沒有做。 –

HTML/CSS：製作一個包裝以適應其子女的身高

回答

相關問題