如何修復/防止<body>與<footer>重疊？

-2

我已經嘗試位置：固定/靜態/相對/絕對...仍然重疊在身體上&有時候會阻擋腳部（阻擋身體的其他部位）。如何修復/防止<body>與<footer>重疊？

圖片：

/* Footer */ 
 

 
footer { 
 
    background: #444; 
 
} 
 

 
.h-sec { 
 
    font: 22px Arial, Helvetica; 
 
} 
 

 
.sec { 
 
    font: 9px, Arial, Helvetica; 
 
} 
 

 
#f-nav a { 
 
    color: #F4F4F4; 
 
} 
 

 
#f-nav .current { 
 
    color: #A9A9A9; 
 
    text-decoration: underline; 
 
} 
 

 
.a-void { 
 
    color: #000000; 
 
}

<footer> 
 
    <section class="f-sec1"> 
 
    <h5>CAD | Tech Website&copy;</h5> 
 

 
    <br> 
 
    <div id="f-nav"> 
 
     <a href="index.html" class="current">Home</a> 
 
     <a href="services.html">Services</a> 
 
     <a href="contact.php">Contact</a> 
 
     <a href="about.html">About us</a> 
 
    </div> 
 

 
    </section> 
 

 
    <section> 
 
    <a href="####.com" class="a-void">Donate :)</a> 
 
    </section> 
 
</footer>

爲全碼（在圖像錯誤）：https://jsfiddle.net/s0nk37cg/ - 它看起來不錯，但它是因爲沒有圖像，請查看圖像或讓你自己的圖像清晰可辨

來源

2017-08-11 Aegir Aideron

您需要清除浮動。見https://css-tricks.com/all-about-floats/ :)'clear：both;' –

什麼漂浮？這個問題需要包括一個[mcve] – Quentin

請不要問你的問題的一部分粗體和大寫。此外，簡單地將頁腳設置爲靜態或固定或相對或絕對位置不會自行解決任何問題。 –

試試這個：

步驟1 - 添加以下你的CSS：

.clearfix:after {content:""; display:table; clear:both;}

第二步 - 在你的HTML的變化：變化：

<section id="container" >

- 至 -

 <section id="container" class="clearfix">

看看是否有幫助，您可能需要撬動您的利潤和/或填充

來源

2017-08-11 10:35:43 SoneaV

-1

簡單修復對於這個問題是給你的body元素一個margin-bottom的值，以避免在頁面或滾動結尾重疊。根據頁腳的高度提供值。

來源

2017-08-11 10:15:38

以下是我更新的一些內容。身體邊緣底部的內聯樣式（因爲它沒有在小提琴中使用外部css應用）頁腳元素的位置，寬度，頂部和底部值。 https://jsfiddle.net/s0nk37cg/1/ –

如何修復/防止<body>與<footer>重疊？

回答

相關問題