宽度 100% 页脚问题 - HTML CSS答案

【问题标题】：width 100% footer issue - HTML CSS宽度 100% 页脚问题 - HTML CSS
【发布时间】：2017-07-27 01:01:56
【问题描述】：

我有一个大问题。我正在设计一个着陆页，但我的页脚元素有问题！

我将其宽度设置为 100%，但是当我在浏览器中预览它时，它不是 100%，而是在左侧、右侧和底部留下了几个像素的边框。

这是页脚的 CSS：

footer {
width: 100%;
background: white;
height: 100px;
margin-top: 100px;

}

如果我添加类似的东西，任何东西都会改变：left: 0px;底部：0px；或右：0px;

我该怎么办？

如果我没有很好地解释问题，这是一张图片。

【问题讨论】：

标签： html css

【解决方案1】：

您似乎没有重置 body 标记上的 padding 和 margin 值。浏览器在那里使用一组标准的 CSS 规则，其中通常包括一些填充和边距。

将此添加到您的 CSS：

body { margin: 0; padding: 0; }

【讨论】：

【解决方案2】：

似乎父元素（可能是<body> 或任何<div>）具有固定宽度或一些边距和/或填充。

width:100%; 占用父元素提供的所有可用空间。例如，如果父级的宽度为 700 像素，那么您的页脚也会有这个。

【讨论】：

【解决方案3】：

它看起来更像是你的 body 元素的边距/填充，而不是页脚本身。尝试将以下内容添加到您身体的 CSS 标记中：

body
{
  margin:0;
  padding:0;
}

还将这两个属性添加到您的页脚 css 标记中，以确保它不会从其他元素继承任何内容。

【讨论】：

【解决方案4】：

这看起来是一个合并/填充问题。您可以重置正文的填充和页脚的边距，使其覆盖 100% 宽度

body {
    margin: 0px;
    padding: 0px;
}

footer {
    margin: 0px;
}

【讨论】：