<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><style> ???*{ ???????margin:0; ???????padding: 0; ???} ???html,body{ ???????height: 100%; ???} ???#container{ ???????width: 100%; ???????min-height: 100%; ???????padding-bottom: 50px; /*底部空出50px，放footer*/ ???????position: relative; ???????box-sizing: border-box; /*效果：padding后不改变其宽高*/ ???} ???.nav{ ???????/*最上面的div不能有margin-top，不然会造成整个body下移*/ ???????width: 100%; ???????height: 50px; ???????background-color: blue; ???} ???.main{ ???????width: 100%; ???????height: 400px; ???????background-color: red; ???} ???.footer{ ???????height:50px; ???????background-color: yellow; ???????position: absolute; /*相对于#container固定定位*/ ???????left: 0; ???????bottom: 0; ???????width: 100%; ???}</style><body> ???<div id="container"> ???????<div class="nav"></div> ???????<div class="main"></div> ???????<div class="footer"></div> ???</div></body></html>css的理解 ----footrt固定在底部
原文地址：https://www.cnblogs.com/cl94/p/10335834.html