正文
css的理解 ----footrt固定在底部
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
margin:;
padding: ;
}
html,body{
height: %;
}
#container{ width: %;
min-height: %;
padding-bottom: 50px; /*底部空出50px，放footer*/
position: relative;
box-sizing: border-box; /*效果：padding后不改变其宽高*/
}
.nav{
/*最上面的div不能有margin-top，不然会造成整个body下移*/
width: %;
height: 50px;
background-color: blue;
}
.main{ width: %;
height: 400px;
background-color: red;
}
.footer{
height:50px;
background-color: yellow;
position: absolute; /*相对于#container固定定位*/
left: ;
bottom: ;
width: %;
}
</style>
<body>
<div id="container">
<div class="nav"></div> <div class="main"></div> <div class="footer"></div>
</div>
</body>
</html>
