使身体占据

Question

滚动页面

的100％我有一个HTML页面

html,body{ height: 100%; } 

但我有比它可以适应100％的页面内容比较多，所以垂直滚动条。这很好，但在</body>之前，我有一个<footer>Some text</footer>。我的问题是，页脚出现在屏幕中间，即使它应该显示在页面的最底部。我检查了，没有margin适用于任何元素，将推动在身体高处的页脚。

对我而言，奇怪的是，当我使用Chrome开发人员工具检查页面时，它显示了身体覆盖的区域不是可滚动区域的100％。如果没有滚动条，则此区域为页面的100％。

我无法提供标记，这是一个传统的ASP.Net应用程序，它很混乱。

Answer 1

尝试min-height: 100%改为。在html和body上。此外，它似乎页脚是绝对定位，但最小高度应该解决这个问题。

如果它以后没有，然后将填充底部应用于身体，并增加它，直到页脚是你想要的地方。

Answer 2

这取决于你想如何解决这个问题。如果你知道该网页将永远是比内容更短，你可以向下移动页脚底部有：

footer { 
    position: absolute; 
    bottom: 0; 
} 

或者这是Flexbox的任务（前提是你可以删除旧的浏览器）。像这样的应该做的伎俩：

body { 
    display: flex; 
    flex-direction: column; 
} 
.main { 
    flex-grow: 1; 
}