CSS佈局問題 - Div未與內容一起擴展

我是DIV佈局和CSS工作的新手，所以請原諒我，如果我對我要問的問題沒有意義。CSS佈局問題 - Div未與內容一起擴展

問題
我有一個頁面，如果一切都是空白的頁面正確呈現與我的div填滿屏幕。當我測試內容大於內容區域的情況時，內容div沒有隨內容擴展高度。我已經爲此工作了幾個小時，但似乎無法使其工作。以下是我的CSS工作表的樣子。任何指導，你可以給予不勝感激。

理想修復
頁眉部分總是處於在100像素的頂部，子菜單部分總是在50像素的標題下，頁腳總是在頁面中的50像素的底部和內容部分之間總是SubMenu和頁腳部分。如果內容不填充頁面，則內容部分填充頁面的其餘部分，因此頁腳位於底部，如果內容大於頁面，則內容部分將頁腳向下推動屏幕以填充所有內容。（希望是有道理的）

我的網頁裏面有下面的div。

Div 1 - container 
Div 2 - Header 
Div 3 - SubMenu 
Div 4 - Content 
Div 5 - Footer

CSS表

body, html { 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
    background-color: #7EB5D6; 
} 

.container { 
    width: 700px; 
    height: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: white; 
    position: relative; 
    overflow: auto; 
} 

.Header { 
    width: 100%; 
    height: 100px; 
    background-color: lightpink; 
    position: relative; 
} 

.SubMenu { 
    width: 100%; 
    height: 50px; 
    background-color: darkgray; 
    position: relative; 
} 

.Content { 
    width: 100%; 
    height: calc(100% - 200px); 
    background-color: wheat; 
    position: relative; 
} 

.Footer { 
    width: 100%; 
    height: 50px; 
    background-color: black; 
    position: inherit; 
    bottom: 0; 
}

來源

2013-05-08 cdouglas10683

把你的內容高度：汽車，以便它可以自動根據內容調整。

來源

2013-05-08 15:36:46

感謝這對我工作後，我做了另一個修改。我注意到，如果我改變高度爲自動，然後沒有內容的div沒有出現，所以我加min-height：calc（100％ - 200px）;與高度：汽車;並修復它。 – cdouglas10683 2013-05-08 16:15:22

使用clearfix方法！它像一個魅力！

添加到您的CSS的地方：

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

爲第二類再加入clearfix所有適當的div！

來源

2013-05-08 15:41:40

我試過這個，出於某種原因，它不適合我。我將它添加到我的CSS表格的底部，並開始將我的內容div（class =「Content clearfix」）添加到我的內容中，但我放入頁面的1000px高度表擴展了頁腳。然後，我添加了所有其他divs的clearfix，但問題仍然存在。我會繼續玩，以防萬一我錯過了一些東西。我想確保我給你創建找到修復程序，如果我能得到它的工作。 – cdouglas10683 2013-05-08 16:19:48

好的:)沒有看到你的HTML我不知道這是否肯定會工作。但是，這通常會修復div不承認其內容的許多問題。保持方便！順便說一句：你也沒有正確實施它！ – 2013-05-08 17:23:52

CSS佈局問題 - Div未與內容一起擴展

回答

相關問題