站点底部的白色空间

Question

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

在最近的显示器上，页脚似乎太长或太短都会发生什么。我可以在非常小的窗口上滚动，或者更常见的是更大的分辨率会产生一点点空白，我似乎无法摆脱它。

随意使用视图页面源等查看我的CSS和HTML。我不是一个内心的网页设计师，只采取了一个类，这是慢慢拼凑在一起。如果您找到任何可以修复的东西，请告诉我。

我尝试过的事情：

• 增加身高：100％到我的身体
• 将overflow：hidden添加到我的contentFooter
• 添加overflow：hidden！对我的contentFooter很重要

Answer 1

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

当您调试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上。 （谁知道什么时候可以回来为我的所有页面和应用添加页面底部的随机空白区域？！）

Answer 2

我在页面底部找不到任何空白区域。虽然页脚中有一些额外的空间。如果这就是你所指的那么你可以用它来删除额外的空间。

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

}

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

Answer 3

旁注：我正在测试Maxthon。

首先，你的div＃background不占用整个页面，而是占用最少的空间，而当页脚在其中时，它不能超出这个范围。为了解决这个问题，我选择添加

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

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

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

最后，我移动了＆lt; hr＆gt;标记在页脚内部，以便它与它保持一致。我通常只使用顶部边框，但这看起来并不完全相同。该页面现在看起来像this.

PS。如果窗口太小，您将在页面底部出现裁剪问题，但无论如何它们都会发生，因为div#contentBarrier的最小高度小于div#background。

Answer 4

如果“白色空间”的意思是“白色的空间”，我在你的网站底部看不到任何“空白区域”。你使用的是什么浏览器？也许浏览器扩展正在修改您的页面客户端。您也可以考虑使用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边框。

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

Answer 5

您的页面布局高度为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; }

Answer 6

对于其他任何有此问题的人，不知道该怎么做，或上述答案没有回答你的问题：

body {max-height: 100%;}