HTML和正文视口问题
我在filmblurb.org上有一个网站。
当您向外滚动以形成100% CSS布局样式时，“我的网站”的页面容器会延伸到窗口的底部，但是由于某些原因，即使正文和标记的高度都是100%，这两个元素也会在页面中途向下移动，然后在视区缩小时停止。当我在分析Google Inspect元素中的这些元素时，就是这样。我的页面容器目前是最小高度: 100%，但由于某种原因，当缩小时，它实际上会延伸到视口的底部。
我还截取了我所看到的内容的屏幕截图，让你有一个更好的想法。这就是linki917.photobucket.com/albums/ad16/jtarr523/…(对于正文)和
(对于超文本标记语言)...Both没有扩展到底部。
有人知道怎么解决这个问题吗？
我将不胜感激。
回答 2
Stack Overflow用户
发布于 2012-05-31 14:03:33
html元素上的min-height: 100%意味着该元素将至少与视口一样高。这并不意味着它总是延伸到底部。如果向下滚动，则仍然可以在<html>元素的底部下方滚动。
防止这种情况发生的唯一方法(JavaScript除外)是确保页面上的所有元素(即可能导致滚动条的所有内容)都保留在html元素中。强制执行此操作的一个简单方法是将overflow: hidden放在html元素上：
body {
overflow: hidden;
}如果问题是由一个浮动引起的，那么就可以解决它了。如果问题是由一个绝对定位的元素或最后一个元素的底边距为负值引起的，那么您的问题将被一个更严重的问题所取代:页面将在html元素的底部被切断。然后，您将不得不以其他方式找到问题元素。
(这同样适用于body元素；它将需要自己的overflow: hidden;来确保任何内容都不能扩展到它之外。)
Stack Overflow用户
发布于 2012-11-02 15:35:52
我不确定它是否适用于浏览器缩放，但根据我的经验(根据this的问题)，如果您将容器元素设置为min-height: 100%，则需要将html标记height设置为100%。
html { height: 100%; }
body { min-height: 100%; }将body替换为对您的主容器的引用，它应该仍然有效。据我所知，将html设置为100%没有任何不良反应；它不会切断页面，也不会弄乱任何其他样式。
就像我说的，我不能百分之百确定这与你的问题有关，但可能值得一试。
https://stackoverflow.com/questions/10826022
复制相似问题
腾讯云开发者
