删除页脚下方的空白区域

我的页脚下面总是有一个很大的空白空间.如何确保页面在页脚末尾结束？

这个问题有三种解决方案

在以下所有示例中,我只使用了一个非常基本的HTML模板,只使用了三个div:header,content和footer.所有选项都缩小了,但在更高级的网站上应该可以正常工作.

使用背景颜色

为主体和页脚设置相同的背景颜色.

body {
  margin: 0px;
  font-family: Arial;
  line-height: 20px;
  background-color: red;
}
#header {
  height: 20px;
  background: #222;
  color: white;
}
#content {
  background: gray;
  height: 200px;
}
#footer {
  height: 20px;
  background: red; /*Same as body, you could also use transparent */
  color: white;
}

  Header


  Content


  Footer

    

        This is content of the page
    
    

section {
    min-height: 100vh; /* minus the height of the footer */
}

#main{
  border:solid;
  height:100vh;
}
#footer{
  border:solid;
}

Everything here


footer