常見的重疊問題，但通常的答案似乎並不工作

好吧，我完全知道這個問題已經在幾個網站上多次提出過，我已經完成了我的研究並嘗試了所有人提供的解決方案，但我顯然錯過了某些東西因爲他們沒有幫助。我相對較新的HTML和CSS，所以也許它簡單，我忽略了。常見的重疊問題，但通常的答案似乎並不工作

繼承人我的問題。我有頭和一個容器divs，然後是一個頁腳div，我希望頁腳div仍然堅持到窗口的底部，但是當窗口調整大小時，我不希望它重疊容器div。

我可以得到頁腳div粘到瀏覽器的底部沒有明顯的絕對位置和底部0 CSS的問題，但很明顯，然後導致與容器div的重疊問題，所以我做了我的研究，並有嘗試在body標籤中添加一個相對位置，然後將頁腳div移動到容器div的底部，而不是窗口的底部。我創建了我的問題在這裏的小型模擬：

首先不會對身體的相對位置：

http://www.klstuff.com/test1

然後用相對位置上的身體：

http://www.klstuff.com/test2

基本上我想要框2粘到窗口的底部，但是當窗口被調整大小時，我不希望它重疊框1.我也嘗試在框體中添加最小高度和高度100％屬性d容器標籤，但似乎根本沒有做任何事情。這裏是test2的代碼（與相對位置屬性作爲我認爲這是稍微更接近於正確的。）

<?xml version="1.0" encoding ="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<link href="stylesheet.css" rel="stylesheet" type="text/css" /> 
<head> 
<title>HTML/CSS Test Site</title> 
<meta name="description" content="HTML/CSS testing page."> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
</head> 


<body> 


<div id="Box1"> 
    <p>BOX 1</p> 
</div> 

<div id="Box2"> 
    <p>BOX 2</p> 
</div> 

</body> 
</html> 

body { 
height: 100%; 
position: relative; 
} 

#Box1 { 
width: 980px; 
background-color: blue; 
color: #fff; 
margin: auto; 
text-align: center; 
padding-bottom: 150px; 
padding-bottom: 150px; 
margin-top: 200px; 
} 

#Box2 { 
width: 100%; 
background-color: red; 
text-align: center; 
padding-bottom: 50px; 
padding-bottom: 50px; 
position: absolute; 
bottom: 0; 
left: 0; 
}

來源

2012-08-02 DavidT

嘗試「粘腳」技巧 - http://ryanfait.com/sticky-footer/ – jpea 2012-08-02 15:17:10

嗬終於這樣做！花了我一會兒。

確定第一件事情，首先做一個包含兩個框的div。將身體的高度設置爲100％，然後爲容器設置100％的最小高度。將容器位置設置爲絕對，寬度爲100％。

然後，爲您的頁腳設置一個高度，並將相同值的頁邊距設置爲您的主要內容（即框1）。按代碼：

HTML：

<div id="container"> 
    <div id="Box1"> 
     <p>BOX 1</p> 
    </div> 

    <div id="Box2"> 
     <p>BOX 2</p> 
    </div> 
</div>

CSS：

body { 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
} 

#Box1 { 
    width: 980px; 
    background-color: blue; 
    color: #fff; 
    margin: auto; 
    text-align: center; 
    height: 150px; 
    margin-bottom: 100px; 
    margin-top: 200px; 
} 

#Box2 { 
    width: 100%; 
    background-color: red; 
    text-align: center; 
    position: absolute; 
    bottom: 0; 
    height: 100px; 

} 

#container { 
    width: 100%; 
    min-height: 100%; 
    position:absolute; 
}

希望這有助於。這個對我有用。

來源

2012-08-02 17:20:17 Mackey18

是的這個作品，唯一的問題是不得不刪除填充，否則一點會重疊。但對於這些基本網站來說，這沒什麼。然而，它仍然不會完全爲網站即時工作，但我認爲它是因爲這個確切的填充問題，我現在要通過工作。我注意到在發佈的網站上使用inspect元素時，他們中的很多人都有一個圍繞整個網站的「包裝」類型div，我從未真正看到這些點，因爲我認爲身體標記已經這樣做了，但我猜它沒有這就是爲什麼這麼多人擁有它。非常感謝你的努力麥基:) – DavidT 2012-08-02 17:55:36

哈諾我所做的一切都忘記了在頁腳上方div的邊緣底部:)再次感謝麥基你的解決方案似乎工作精彩 – DavidT 2012-08-02 18:04:41

沒問題，我很高興你最終得到它。只需點擊綠色的勾號將其標記爲可接受的解決方案。謝謝！ – Mackey18 2012-08-02 18:17:40

常見的重疊問題，但通常的答案似乎並不工作

回答

相關問題