3

我在filmblurb.org 上有一个网站。

当您向外滚动以形成 100% CSS 布局样式时，我网站的页面容器会延伸到窗口底部，但出于某种原因，即使主体和标签的高度均为 100%，这两个元素也会消失大约在页面的一半，然后在视口缩小时停止。当我在 Google Inspect Element 中分析这些元素时。我的页面容器目前是 min-height: 100%，但由于某种原因，缩小时实际上确实延伸到了视口的底部。

我还截取了我所看到的屏幕截图，以便为您提供更好的想法。在这里它们是 [link]i917.photobucket.com/albums/ad16/jtarr523/...（用于正文）和

在此处输入图像描述

（对于 HTML）...两者都没有延伸到底部。

有人知道如何解决这个问题吗？

我会很感激。

4

2 回答 2

3

min-height: 100%在html元素上意味着该元素将至少与视口一样高。这并不意味着它会一直延伸到底部。如果向下滚动，那么您仍然可以在<html>元素底部下方滚动。

防止这种情况（没有 JavaScript）的唯一方法是确保页面上的所有元素（即可能导致滚动条的所有内容）都保留在html元素中。强制执行此操作的一种简单方法是穿上overflow: hidden您的html元素：

body {
    overflow: hidden;
}

如果问题是由浮动引起的，那么这将解决它。html如果问题是由绝对定位的元素或最后一个元素的负下边距引起的，那么这将用更严重的问题代替您的问题：页面将在元素的底部被切断。然后，您将不得不以其他方式找到问题元素。

（这同样适用于body元素；它需要自己的元素overflow: hidden;来确保没有任何东西可以超出它。）

于 2012-05-31T06:03:32.907 回答
0

不确定它是否适用于浏览器缩放，但根据我的经验（根据这个问题），如果您将html容器元素设置为.height100%min-height: 100%

html { height: 100%; }
body { min-height: 100%; }

替换body为对您的主容器的引用，它应该仍然可以工作。html据我所知，设置为 100%没有不良反应；它不会切断页面或弄乱任何其他样式。

就像我说的，我不是 100% 确定这与您的问题有关，但可能值得一试。

于 2012-11-02T07:35:51.703 回答