Html 站点底部的空白区域

我正在努力消除即将发布的公文包网站底部的空白：

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

请随意使用查看页面源代码等来查看我的CSS和HTML。我本质上不是网页设计师，只上过一门课，这门课是慢慢拼凑起来的。请告诉我，如果你有什么可以解决它

我尝试过的事情：

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

如果你所说的“空白”是指“白色的空间”，那么我在你的网站底部看不到任何“空白”。你在使用什么浏览器？也许浏览器扩展正在修改您的页面客户端。你也可以考虑使用一些类似的方法来检查问题的程度。 如果您指的是页脚中的空格，则需要更改此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边框

---

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

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

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

}

额外的空间是因为页脚的高度固定。将高度设置为

height

设置为

auto

应该可以解决此问题

---

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

通过将以下内容添加到CSS中，可以使

body

元素占据浏览器的整个高度：

html, body { height: 100%; }

然后，您可以将页脚放在

主体

元素的底部，并添加填充内容，以便在窗口变小时，可以按预期进行滚动：

#contentBarrier { padding-bottom: 45px; }
#background > hr { position: absolute; width: 100%; bottom: 42px; }
#contentFooter { position: absolute; width: 100%; bottom: 0; }

---

旁注：我正在Maxthon进行测试

首先，你的div#background并没有占据整个页面，而是占据了尽可能少的空间，而且因为页脚在里面，所以不能超出这个范围。为了解决这个问题，我选择添加

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

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

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

最后，我将

---

标记移到页脚内部，使其保持不变。我通常只会使用上边框，但它没有完全相同的外观。页面现在看起来像

---

另外，如果窗口太小，页面底部会出现剪切问题，但无论如何都会出现，因为

div\contentBarrier

的最小高度小于

div\background

我所有网站底部都有空白；我就是这样解决的：

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

* { border: 1px solid red; }

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

---

由于Chrome扩展出现故障，我的页面底部出现了空白，该扩展将

div

#dp#u swf_引擎

添加到页面底部：

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

---

如果没有红色框，我将永远不会注意到1px div。然后我去掉了有故障的扩展，并将

display:none

放在

#dp#u swf_引擎上作为第二个度量。（谁知道它什么时候会回来在我的页面底部为我的所有页面和应用程序添加随机空白？！）
对于其他有此问题但不知道该怎么办的人，或者上述答案没有回答您的问题：

body {max-height: 100%;}

你指的是什么空白？我没有看到任何。也没有看到任何-我正在查看Chrome。。。编辑：你描述这种情况的方式就像你有一个粘滞的页脚。你是指文本位于顶部的页脚吗？除此之外，它看起来还不错。页面的总高度将等于outerheader+contentBarrier+contentFooter的高度。搜索将页脚粘贴到浏览器窗口底部的解决方案。该页面有906px高。除此之外的任何东西都是空白。这就是他所指的。如果他对页脚在内容较长的页面上始终可见感到满意，那就好了。是的，这会产生这种效果。我们必须等他告诉我们他到底在找什么。我无法让这个解决方案在Maxthon或Chrome上运行。你用哪个浏览器测试的，sshekhar？我用Chrome测试的。附上截图作为参考。我只是想知道你用什么屏幕分辨率？在1920x1080中，我将高度设置为“自动”，以达到平衡。事实上，这是一个糟糕的屏幕截图，但从页脚一直到窗口底部都有一块白色。。