html布局【内容小与一页时footer在页面底部，内容大与一页时footer在内容下面】...-优快云博客

本文介绍了一种使网页footer始终处于页面底部的方法，无论内容多少。通过设置body的min-height为100%，并使用绝对定位来固定footer位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. <html></html>的高度是窗口大小<body></body>的高度是里面内容的高度

2. 想实现这个，就要给body min-height：100%所以刚开始内容少时body的高度也可以撑满窗口大小，内容翻页时高度已经大与　　100%了，就无所谓了

　　为了把body做为父元素把内容都放到这里面而不是浏览器窗口，所以body设置position:relative

<html>
<head>
<title>内容小与一页时footer在页面底部，内容大与一页时footer在内容下面</title>
</head>
<body style="min-height: 100%;position: relative;">
<div style="background-color:grey;text-align:center;">
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
content</br>
</div>
<div style="position:absolute;height:50px;background-color:blue;bottom: 0;left:0;right:0;">
</div>
</body>
</html>