<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>底部始终在文档末尾,当文档较长时跟随在文档末尾,当文档较短时在窗口底部</title>
<style type="text/css">
html,body{width:100%;height:100%;margin:0;}
p{margin:0px;line-height: 100px;}
.g-doc{position:relative;min-height:100%;_height:100%;}
.g-bd{padding:0 0 60px;zoom:1;}
.g-ft{height:50px;margin:-50px 0 0;background:#ddd;}
</style>
</head>
<body>
<div class="g-doc">
<div class="g-bd">
<p>请增加或减少内容,或改变窗口大小,以便查看效果。</p>
<p>请增加或减少内容,或改变窗口大小,以便查看效果。</p>
<p>请增加或减少内容,或改变窗口大小,以便查看效果。</p>
<p>请增加或减少内容,或改变窗口大小,以便查看效果。</p>
<p>请增加或减少内容,或改变窗口大小,以便查看效果。</p>
</div>
</div>
<div class="g-ft">
底部始终在文档末尾,当文档较长时跟随在文档末尾,当文档较短时在窗口底部。
</div>
</body>
</html>


【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步