頁腳與頁面底部的內容重疊

我的頁腳留在頁面的底部，但它與內容重疊，我不能阻止它。頁腳與頁面底部的內容重疊

我已經看遍了互聯網上的解決方案，沒有任何作品。我有一種感覺，我需要移動div等，但我可能是錯的。

這裏是我的代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Eczar" rel="stylesheet"> 
    <link rel="stylesheet" href="style/stylesheet.css"> 
    <title>Layout</title> 
</head> 
<body> 
    <div id="header"> 
     <img src="img/top-bar/bar.png" height="10px" class="top"> 
     <ul id="menu-bar"> 
      <li><a href="#header" class="smoothScroll">Home</a></li> 
      <li><a href="#first" class="smoothScroll">Page 1</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropbtn">Page 2</a> 
       <div class="dropdown-content"> 
        <a href="#">Drop 1</a> 
        <a href="#">Drop 2</a> 
       </div> 
      </li> 
      <li><a href="#">Page 3</a></li> 
      <li><a href="#">Login</a></li> 
     </ul> 
     <img src="img/archery-1839284.jpg" class="cover"> 
    </div> 
    <div id="wrapper"> 
     <div id="content"> 
      <div id="first" class="item"> 
       <p class="para"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime distinctio sed officia, nam iure quam necessitatibus nobis non, aut quaerat autem. Quam mollitia, fugiat amet veritatis, voluptate earum quidem et! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ex earum impedit ipsum consequatur dolor doloremque eum. Sed fugit dolor maiores pariatur nesciunt iste cupiditate consequuntur, dolore alias numquam voluptatum! 
       </p> 
      </div> 
      <div id="img-span"> 
       <img src="img/board-911636.jpg" class="wide"> 
      </div> 
      <div class="item" style="background-color: red;"> 
       <p class="para"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem sit non ipsam aut perferendis neque magnam deleniti, officia necessitatibus porro odio ipsum est eum aliquam nulla placeat, deserunt? Atque, nisi. 
       </p> 
      </div> 
     </div> 
     <div id="footer"> 
      <img src="img/top-bar/bar.png" height="10px" class="bottom"> 
     </div> 
    </div> 
</body> 
</html>

CSS：

body { 
    background-color: grey; 
    margin: 0; 
    padding: 0; 
    font-family: 'Eczar', serif; 
    scroll-behavior: smooth; 
} 

#header { 
    position: relative; 
    text-align: center; 
} 

.top { 
    position: fixed; 
    width: 100%; 
    z-index: 3000; 
    left: 0; 
    top: 0; 
} 

.bottom { 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 

#wrapper { 
    padding: 0; 
    margin: 0; 
    position: absolute; 
    width: 100%; 
    margin-top: 100%; 
} 

.cover { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    max-width: 100%; 
    background-image: url(../img/archery-1839284.jpg); 
    overflow: hidden; 
} 

#content { 
    width: 100%; 
    top: 100%; 
    height: 100%; 
    position: relative; 
    background-color: blue; 
    text-align: center; 
} 

.item { 
    padding-left: 20%; 
    padding-right: 20%; 
    padding-top: 4px; 
    padding-bottom: 4px; 
    overflow: hidden; 
    margin: 0; 
    position: relative; 
} 

.item p { 
    font-size: 18px; 
} 

.img-span { 
    padding: 0; 
    margin: 0; 
    width: 100%; 
    position: relative 
} 

.wide { 
    width: 100%; 
    height: 100%; 
    opacity: 1; 
    overflow: hidden; 
    display: block; 
} 

#footer { 
    width: 100%; 
    height: 70px; 
    background-color: greenyellow; 
    z-index: 3000; 
    bottom: 0; 
    left: 0; 
    position: absolute; 
    clear: both; 
}

來源

2017-03-07 ArcherBoy27

只需將#footer設置爲position：relative;將解決重疊問題。

#footer { 
width: 100%; 
height: 70px; 
background-color: greenyellow; 
position: relative; 
clear: both; }

但是，你應該看看下面的網站，該網站介紹瞭如何創建一個腳註，將始終堅持在頁面的底部，有或大或小的內容。這將是一個更好的方法。

http://www.cssstickyfooter.com/using-sticky-footer-code.html

來源

2017-03-07 11:12:14

非常感謝，我不敢相信我沒有嘗試哈哈：D – ArcherBoy27

我不認爲你去它的方式是最好的，但你會在你的情況下工作，是改變你的包裝類添加填充底部等於你的頁腳高度，如：

#wrapper { 
    padding: 0 0 10px 0; 
    margin: 0; 
    position: absolute; 
    width: 100%; 
    margin-top: 100%; 
} 
#footer { 
    height:10px; 
}

來源

2017-03-07 11:09:49

根據你的問題，你要堅持你的頁腳的你的頁面右側的底部？所以，你必須把下面的css代碼

html { 
position: relative; 
min-height: 100%; 
} 

body { 
margin-bottom:70px; 
}

來源

2017-03-07 11:13:57 Nishant

頁腳與頁面底部的內容重疊

回答

相關問題