如何使用CSS移除页脚边距并取消页脚固定悬浮效果

移除页脚左右边距 #

该问题由浏览器给body标签默认添加的8px外边距导致，添加以下全局重置规则可从根源避免这类默认样式干扰：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

如果不想修改全局样式，也可以单独针对body设置：

body {
  margin: 0;
}

取消固定悬浮、实现滚动到底才展示的效果 #

你需要的是流式粘底页脚效果，无需给页脚加固定定位，修改整体布局规则即可：
首先给body添加flex布局规则，让内容区域自动撑开高度，将页脚推至底部：

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* 让body内除footer外的所有内容自动占满剩余高度 */
body > *:not(footer) {
  flex: 1;
}

如果你之前给footer设置过position: fixed相关样式，直接删除即可，修改后的完整footer样式如下：

footer {
  height: 200px;
  width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../assets/footer.png");
  background-position: center;
  color: white;
  text-align: center;
  display: table;
}

footer>p {
  display: table-cell;
  vertical-align: middle;
  font-family: Lato, sans-serif;
  font-size: 11pt;
  font-weight: 400;
  line-height: 1.6667;
  width: 100%;
}

你的原有HTML结构不需要做任何修改即可生效。

内容的提问来源于stack exchange，提问作者Flytre 7