我的頁腳有錯誤的寬度並且保持重疊

Question

所以我網站上的頁腳似乎不想成爲頁腳。當我將頁腳代碼放在我的網站正文的底部時，頁腳寬度將自動對應於其上的任何寬度。所以它最終看起來像一個隨機的框而不是一個頁腳。

但是，當我將代碼移動到頁面正文的頂部時，它最終看起來像全屏幕中的普通頁腳，但是當縮小瀏覽器窗口時，它會稍微跳躍並與我的其他內容重疊。

所以，現在我只是困惑，我怎麼讓我的頁腳簡單地正常？

這是我的代碼：

.footer { 
 
    height:150px; 
 
    width:100%; 
 
    position:absolute; /*i change this to relative when the html code is at the bottom of the body, but right now i am using the method that makes the footer look normal in fullscreen*/ 
 
    right: 0; 
 
    bottom: -770px; /*i change this to 290 when the html code is at the bottom of the body, but right now i am using the method that makes the footer look normal in fullscreen*/ 
 
    left: 0; 
 
    background-color:#242729; 
 
    text-align: center; 
 
    z-index:10; 
 
    margin:auto; 
 
} 
 

 
.footer img { 
 
    float:left; 
 
    margin-left:25px; 
 
    margin-top:30px; 
 
}

<div class="footer"> 
 
    <img src="https://designersunnies.com/wp-content/uploads/2017/04/morocco-sahara-erg-chebbi-dunes-100x100.jpg"><p></p> 
 
</div>

Answer 1

更改你頁腳的CSS這樣

.footer { 
    height:150px; 
    width:100%; 
    position:absolute; 
    bottom: 0; 
    background-color:#242729; 
    text-align: center; 
    } 

添加這在你的CSS文件過於

html,body{ 
margin:0; 
padding:0; 
}