非擴展容器div

-1

我想設置一個基本的佈局，頁眉和頁腳在整個頁面寬度上進行，無論用戶設置了什麼樣的分辨率。非擴展容器div

我已經管理這個，但現在我有一個問題，其中主容器div不會正確展開高度明智地包含內部的div。它似乎只擴展到一定的高度，然後不再進一步，不管你改變什麼樣的高度或最小高度的風格。

這裏的基本結構：

<div id="page"> 
    <div id="content"> 
    </div> 

</div> 
<div id="footClear"></div> 

<div id="footer"> 
</div>

頁腳代碼是迫使頁腳粘到頁面的底部，無論主容器的高度（ID =「頁」）

我對這些部件的CSS是：

#page { 
margin:0 auto; 
width:1000px; 
background:red; 
padding:0px; 
min-height:100%; 
position:relative; 
margin-bottom:-47px; 
} 

#content { 

} 

#footer { 
width:100%; 
height:22px; 
position:relative; 
margin:0 auto; 
background:#000000; 
text-align:center; 
padding-top:3px; 
font-size:12px; 
} 

#footClear { 
    height:22px; 
    clear:both; 
}

的鏈接要什麼給我的網站是在這裏，如果你想看看：www.therapyoracle.co.uk/new

你可以看到頁面div是紅色的，並沒有在頁面上進行。

來源

2012-05-11 imperium2335

刪除#page {height: 100%;}你可以給你想說的一個例子嗎？ – sandeep

在直播現場，#page有height: 100%集，這是造成問題。

它來自您的ie6.css！這就是你如何使它只在IE6中加載：

<!—[if lt IE 7]> 
<link rel="stylesheet" type="text/css" href="assets/css/ie6.css" /> 
<![endif]—>

上面的HTML中的連字符是錯誤的。這種替換HTML：

<!--[if lt IE 7]> 
<link rel="stylesheet" type="text/css" href="assets/css/ie6.css" /> 
<![endif]-->

而且ie6.css將僅在IE6中加載，而不是所有的瀏覽器，你的問題將得到解決。

來源

2012-05-11 12:48:20 thirtydot

謝謝！非常快速和簡單的修復。 – imperium2335

沒問題。我不確定你實際上希望頁腳行爲如何，但是你是否嘗試過[粘性頁腳]（http://ryanfait.com/sticky-footer/）？ – thirtydot

如果你把高度出你body這會爲您解決問題如下

body { 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    font-size: 14px; 
    padding: 0; 
    margin: 0; 
    }

來源

2012-05-11 12:46:56 frontendzzzguy

刪除margin-bottom:-47px;和ie6.css

來源

2012-05-11 12:51:58 PhilMarc

儘管如此，三十歲的答案還是比較好的 – PhilMarc

非擴展容器div

回答

相關問題