Question

我在filmblurb.org有一个网站。

当您向外滚动以实现100％CSS布局样式时，我的网站的页面容器会延伸到窗口的底部，但出于某种原因，即使身体和标记的高度均为100％，两个元素大约在页面的中间位置，然后在视口缩小时停止。当我在Google Inspect Element中分析这些元素时。我的页面容器当前是最小高度：100％，但由于某种原因实际上在缩小时实际上会扩展到视口的底部。

我还截取了我所看到的可以给你一个更好主意的截图。他们在这里[link] i917.photobucket.com/albums/ad16/jtarr523 / ...（身体）和

enter image description here

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

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

我很感激。

Answer 1

min-height: 100%元素上的

html表示该元素至少与视口一样高。这并不意味着它总是会延伸到底部。如果向下滚动，那么您仍然可以在<html>元素的底部下方滚动。

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

body {
    overflow: hidden;
}

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

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

Answer 2

不确定它是否适用于浏览器缩放，但根据我的经验（并根据this问题），您需要将html代码height设置为100%如果要将容器元素设置为min-height: 100%。

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

将body替换为对主容器的引用，它仍应有效。据我所知，将html设置为100％没有任何不良反应;它不会削减页面或弄乱任何其他样式。

就像我说的那样，我并不是100％确定这与你的问题有关，但它可能值得一试。

HTML和Body Viewport问题

2 个答案: