为什么这是错误的？关于底部页脚

Question

我不明白。我编写的代码使页脚始终位于底部。让我们说粘页脚。这是我的代码。

 body {
       background-color: #edecd8;
       margin:0;
       padding:0;
        height:100%;

     }

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



      #body {
        padding-bottom:20px;
      }


    #footer {
      position:absolute;
      bottom:0;
      width:100%;
      height:20px;/* Height of the footer */
      background: #FC0;}

</style>

<div id="footer">  contact | the athens store | Mitropoleos 37    </div> 

使用这些代码，效果不佳，实际上页脚不在底部，而是稍高一些。然后我在一开始就添加了一个像这样的 html 标签，它起作用了！之前为什么会出错呢？

html,body {
   background-color: #edecd8;
   margin:0;
   padding:0;
   height:100%;
  }

Answer 1

浏览器有默认的页边距和填充，这就是为什么你的栏下有一点空间，这就是为什么开发人员使用 css 重置来编写这些内容。

或者通过使用简单的代码，

如果将其替换

html,body {
   background-color: #edecd8;
   margin:0;
   padding:0;
   height:100%;
  }

为此

* {
   margin:0;
   padding:0;
}    

body {
   background-color: #edecd8;
   height:100%;
}

代码，它将起作用并写入所有默认的浏览器填充和边距

Answer 2

浏览器有一个标准的（并且通常是不同的）元素 CSS。 html 元素可能应用了边距或填充，使页脚稍微远离底部。

或者需要给 html 元素赋予 100% 的高度才能使其扩展窗口的整个高度。

这就是使用 CSS 重置的原因，以达到浏览器之间的基线标准。