我的页脚有错误的宽度并且保持重叠

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; 
}