2

我正在尝试消除我即将推出的投资组合网站底部的这个空白：http: //codymiracle.com/

发生的情况是页脚在大多数显示器上似乎太长或太短。要么我在非常小的窗口上滚动，要么更常见的是较大的分辨率会产生一点我似乎无法摆脱的空白。

随意使用查看页面源等来查看我的 CSS 和 HTML。我本质上不是网页设计师，只上过一节课，这是慢慢拼凑起来的。如果您发现任何可以修复它的东西，请告诉我。

我尝试过的事情：

  • 增加身高：100% 到我的身体
  • 添加溢出：隐藏到我的 contentFooter
  • 添加溢出：隐藏！对我的 contentFooter 很重要
4

6 回答 6

7

我所有网站的底部都有空白；这就是我解决问题的方法：

当您调试这样的 CSS 问题时，您可以做的第一件事也是最好的事情是添加：

* { border: 1px solid red; }

此 CSS 行在所有 HTML 元素周围放置了一个红色框。

由于错误的 Chrome 扩展程序将我的页面底部添加到我的页面底部，我的页面底部有空白div #dp_swf_engine：

<div id="dp_swf_engine" style="position: absolute; width: 1px; height: 1px;"></div>

如果没有红色框，我永远不会注意到 1px div。然后我摆脱了有缺陷的扩展，并display:none作为#dp_swf_engine辅助措施。（谁知道它什么时候会回来在我的页面底部为我的所有页面和应用程序添加随机空白？！）

于 2015-03-04T16:37:43.910 回答
3

我在页面底部找不到任何空白。尽管页脚中有一些额外的空间。如果这就是您所指的，那么您可以使用它来删除额外的空间。

#contentFooter
{
    height:auto;
    background-color: #9db0ae;

}

额外的空间是由于页脚的固定高度。设置为height应该auto可以解决问题。

在此处输入图像描述

于 2013-09-02T18:38:20.407 回答
1

旁注：我正在 Maxthon 中进行测试。

首先，您的 div#background 不会占用整个页面，而是占用尽可能少的空间，并且由于页脚在其中，它不能超出此范围。为了解决这个问题，我选择添加

div#background {
    position: absolute;
    height: 100%;
    width:  100%;
}

然后我也修改了页脚以保持在其父级的底部。因为它的父级是绝对定位的，所以我可以使用简单的方法：

div#contentFooter {
    position: absolute;
    width:  100%;
    bottom:  0px;
}

最后，我将 <hr> 标记移到了页脚内，这样它就可以留在页脚中。我通常只使用顶部边框，但这看起来不太一样。页面现在看起来像这样。

PS。如果窗口太小，您将在页面底部遇到剪裁问题，但无论如何都会发生，因为div#contentBarriermin-height 小于div#background.

于 2013-09-02T18:56:04.337 回答
0

如果“空白”是指“白色的空间”，我在您的网站底部看不到任何“空白”。你使用的是什么浏览器？也许浏览器扩展正在修改您的页面客户端。您也可以考虑使用Browsershots之类的工具来检查问题的严重程度。

如果您指的是页脚中的空间，则需要更改此 CSS 声明中定义的高度：

#contentFooter {
    height: 42px; /* change this number */
}

编辑：努力让你在底部附加一个页脚......

尝试设置：

#contentFooter {
   height: 42px;
   background-color: #9db0ae;
   position: fixed;
   bottom: 0;
   width: 100%;
}

#contentBarrier {
   clear: both;
   width: 1200px;
   padding-top: 20px;
   text-align: center;
   height: 100%;
}

还将橙色移动hr到页脚中。或者，更好的是，切换到使用 CSS 边框。

稍作调整，应该可以做到。无论页面高度如何，您的页脚都会位于屏幕底部。如果屏幕小于页面高度，则内容将从页脚下方滚动。您可能需要在内容块的底部添加一些边距，以确保不会有任何内容卡在页脚下。

于 2013-09-02T18:33:53.447 回答
0

您的页面布局是 905 像素高，因此只有当浏览器窗口恰好恰好是那么高时，它才会完全适合。使用特定操作系统和特定浏览器的特定分辨率可能会发生这种情况，但对于大多数人来说不会。

您可以body通过将以下内容添加到 CSS 使元素占据浏览器的整个高度：

html, body { height: 100%; }

然后您可以将页脚放在body元素的底部，并添加填充内容，以便在窗口较小时滚动按预期工作：

#contentBarrier { padding-bottom: 45px; }
#background > hr { position: absolute; width: 100%; bottom: 42px; }
#contentFooter { position: absolute; width: 100%; bottom: 0; }
于 2013-09-02T18:50:26.753 回答
0

对于遇到此问题且不知道该怎么做或上述答案未回答您的问题的其他任何人：

body {max-height: 100%;}
于 2015-06-04T08:28:20.950 回答