如何用页脚覆盖所有空间？ [复制]答案

【问题标题】：How to cover all the space with a footer? [duplicate]如何用页脚覆盖所有空间？ [复制]
【发布时间】：2020-05-23 03:03:34
【问题描述】：

我不太明白为什么页脚（和页眉）没有占用所有空间？我将<body> 部分分为 3 个部分：1) div header，2) div wrapper，3) div footer（这样我就可以分别控制每个部分）。

Div 包装器（应该是窄的）

.wrapper {
display: block;
width: 100%;
max-width: 980px;
margin: 20px auto;
padding: 20px;
border: 1px solid black;}

Div 页脚（在屏幕上应该是 100% 宽）

.footer {
margin: 0px;
padding: 0px;
background-color: black;
height: 200px;
color: orange;
width: 100%;}

我怎样才能让它覆盖所有空间（就像在这个网站上，标题占据了所有空间，但主要内容部分更窄）。

提前谢谢你！

【问题讨论】：

标签： html css

【解决方案1】：

解决这个问题的方法不止一种，而且问题的产生原因也不止一个，所以如果不同的人给你不同的答案，请不要犹豫:)

当出现这种情况时，我最常看到的问题是由没有全宽的父元素或填充大于零的父元素产生的。（可能是尸体。）

如果这不是问题所在，请尝试使用这些媒体查询（一次一个）。

width: -webkit-fill-available;

width: 100vw

【讨论】：

【解决方案2】：

似乎您没有重置大多数浏览器默认添加的body 的默认边距。为此，请添加以下内容：

body {
  margin:0;
}

【讨论】：