CSS - 身高：100％vs最小身高：100％;

所以在我的代碼中，我有一個粘性的頁腳。而粘腳則有min-height爲100%的#wrap容器。但min-height不能在包裝div內的對象上使用height:100%。CSS - 身高：100％vs最小身高：100％;

所以我加了height:100%，但是當窗口高度太小時，通過使頁腳在包裝div中的內容滾動而與佈局混亂。

任何人都有此修復？

<div id="wrap"> 
    <div id="main"> 
     <div id="content"> 

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

</div>

CSS：

*{ 
    padding: 0px; 
    margin: 0px; 
} 
html, body { 
    height: 100%; 
} 
body{ 
    color: #FFF; 
    background-image:url('../images/black_denim.png'); 
} 
#wrap { 
    min-height: 100%; 
    margin-bottom: -200px; 
    position: relative; 
} 
#topBanner{ 
    width: 200px; 
    margin: 0px auto; 
} 
.clearfooter { 
    height: 200px; 
    clear: both; 
} 
/* footer */ 
#footer { 
    position: relative; 
    height: 200px; 
    width: 100%; 
    min-width: 960px; 
}

來源

2012-12-22 Zach Case

我也知道你可以做'位置：絕對;頂部：0;底部：0;'來獲得效果，但是，因爲它是絕對的，頁腳將會像內容那樣行事，如果它也是不存在的話小。 –

如果你需要的是一個棘手的註腳，不掩蓋任何身體的內容，然後只給頁腳固定位置，而給身體的底部填充等於頁腳高度。

body{ 
    padding-bottom:200px; 
} 

#footer { 
    position: fixed; 
    bottom:0; 
    height: 200px; 
    width: 100%; 
}

編輯：

如果你關注的是，在非常小的屏幕固定頁腳涵蓋了大部分的屏幕則是除了可能使用動態CSS媒體查詢或隱藏頁腳沒有解決此JavaScript的。

許多移動瀏覽器並不支持固定位置，因爲它們覆蓋了大部分屏幕。

來源

2012-12-22 21:44:19

這樣做不起作用，因爲您仍然可以將窗口設置得足夠小以覆蓋它。 –

即使修改了'fixed'，它也不起作用。你不瞭解我的問題。我發佈的代碼在將腳註停在任何內容之前停止工作。但是，由於'min-height：100％;'，代碼不允許'wrapper：100％;'在包裝內部。但是，如果沒有'min-height'這個代碼是行不通的，那是我的問題。 –

你說得對，我不明白這個問題。如果你可以發佈一個鏈接到一個更完整的例子與內容，那麼我可能會更好地使用。 –

CSS - 身高：100％vs最小身高：100％;

回答

相關問題