我在使用 min-height: 100% 时遇到了一些问题
我希望页脚始终位于我的内容下方。意思是，如果内容长于屏幕高度，您将看不到页脚，直到您一直滚动到底部
此外，当内容短于屏幕高度时，页脚需要位于屏幕底部。好吧，我想我只是通过添加 min-height: 100%
<html>
<head>
<style>
html, body, main { min-height: 100% }
</style>
</head>
<body>
<main>
<article> .... </article>
<footer> ... </footer>
</main>
</body>
</htm>
现在，出于某种原因，body 标签似乎忽略了这个设置，它的高度正好适合内容。
不幸的是，您不能只将正文设置为 100% ( DEMO )
有什么解决办法吗？
最佳答案
粘性页脚 'hack' 通常使用页脚父元素上的 min-height 和负 margin-bottom 完成。根 html 之前的所有父元素都需要 height:100%;
article{
//height: calc(100% - 50px);
min-height: 100%;
background: yellow;
padding-bottom: 50px;
margin-bottom:-50px;
}
关于html - 最小高度不适用于 body ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34134714/