浮动清除页脚边距白色间隙问题答案

【问题标题】：float clear footer margin white gap issue浮动清除页脚边距白色间隙问题
【发布时间】：2020-07-09 07:18:04
【问题描述】：

我的 html 文档底部有一个空白，我认为问题在于浮动、清除、显示属性的组合使用不当，但我不确定。

我有一个页脚包含在页面的主要持有者 div 中。此页脚的顶部边距为 50 像素，以提供所需的布局，但问题是在较小的屏幕上（例如我的笔记本电脑，这是一台标准尺寸的笔记本电脑），html 和页面底部之间似乎有一个白色间隙- 看起来不仅是持有者 div，而且 html 并没有“清除”页脚顶部的页脚。

这是网址，因为它很难解释，我相信我已经接近解决摆弄浮动，清除和删除边距但不能完全到达那里......有什么想法吗？不胜感激：

tinyurl.com/7ywoqpf

这是问题的图片。

【问题讨论】：

我发誓在右下角我可以看到背景图片的一部分，但在距离右边 30 px 后有空白部分。你在那个位置有另一个divbackground-color:white或z-index吗？
嘿，您已经提出了我今天看到的这个问题，任何我没有遇到问题的方法，您能否提供屏幕截图，指出问题所在，这将有很大帮助。我在等
@happy 唱当然，但我在哪里或如何向这个论坛添加屏幕？这里的惯例是什么？谢谢
您可以从您的 PC 截屏并在文本区域上方编辑您的问题点击它后会出现一个小图像图标，您将看到文件上传对话框，然后您可以从那里上传您的屏幕截图并更新您的答案。
@happy sing：谢谢你，我以后一定会用它。目前看来有人在下面发布了一个屏幕

【解决方案1】：

试试下面的 css - 编辑你的 style.css 第 115 行

footer {
    border-top: 2px solid gray;
    width: 805px;
}

删除margin-top: 50px;

请参阅下图以查看已删除页脚空白的变化。

更新：

尝试删除这个也 style.css line 212

html {height:100% }

【讨论】：

谢谢，但我应该如何实现页脚和图片库之间的 50 像素间隙？另外，为了清楚起见，背景图片应该在最底部，没有空格。
是的，这实际上是 CS 之前的样子，我添加了 html {height:100%}，因为虽然 html 文档在我的笔记本电脑上看起来不错，但在大屏幕上却没有。即问题是相反的，我可以有小屏幕或大屏幕的解决方案，但不能同时适用！如果您通过使用浏览器缩放来检查您的解决方案，您就会明白我的意思。到目前为止，感谢您的帮助，但我真的很感激
如果你不介意请看一下这个网站csszengarden.com我认为这个网站有你的解决方案，因为你已经给出了来自身体背景的两个图像，它们给出了不同分辨率的问题，根据我您必须使用两个 div 并将图像放在该 div 上并确定两个 div 的位置。

【解决方案2】：

去掉margin-top，你就去掉了底部间距。但是您需要将页脚移动到正文部分，使其跨越，而不仅仅是内部 div。

【讨论】：