网站底部的空白

Question

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

发生的是，大多数显示器上的页脚似乎太长或太短。 我要么在很小的窗户上滚动，要么更常见的是较大的分辨率会产生少量的空白，而这似乎是我无法摆脱的。

随意使用查看页面源代码等来查看我的CSS和HTML。 我并不是一个真正的网页设计师，只上了一堂课，而且课程进展缓慢。 如果您发现任何可以解决的问题，请告诉我。

我尝试过的事情：

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

Answer 1

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

调试CSS问题时，您要做的第一件事也是最好的事情是添加：

* { border: 1px solid red; }

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

由于错误的Chrome扩展程序将div #dp_swf_engine添加到页面底部，因此页面底部有#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;
}

最后，我将<hr>标记移到了页脚内部，使其与之保持一致。 我通常只使用顶部边框，但是外观并不完全相同。 该页面现在看起来像这样。

PS。 如果窗口太小，您将在页面底部出现剪切问题，但是无论如何它们都会发生，因为div#contentBarrier min-height小于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像素，因此仅在浏览器窗口恰好那么高时才完全适合。 对于特定的分辨率，特定的操作系统和特定的浏览器，可能会发生这种情况，但是对于大多数人而言，情况并非如此。

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

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%;}