效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>頂部固定下部自動適應(yīng)</title>
<style type="text/css">
html,body {height: 100%;padding: 0; margin: 0; }
.parent{
width:600px;
height: 450px;
margin:100px auto;
position: relative;
background-color: red;
}
.top{
background-color: #BBE8F2;
height:100px;
}
.bottom{
background-color: #D9C666;
position: absolute;
top: 100px;
bottom:0;
}
</style>
</head>
<body>
<div class="parent">
<div class="top">top</div>
<div class="bottom">
bottom
</div>
</div>
</body>
</html>
1. 初始化
三個div：parent 岩臣、top伐蒋、bottom
parent：寬600px、高450px犯建、紅色背景讲冠、整體采用相對定位。
top：淺藍色背景
bottom：土黃色背景
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>頂部固定下部自動適應(yīng)</title>
<style type="text/css">
html,body {height: 100%;padding: 0; margin: 0; }
.parent{
width:600px;
height: 450px;
margin:100px auto;
background-color: red;
position: relative;
}
.top{
background-color: #BBE8F2;
}
.bottom{
background-color: #D9C666;
}
</style>
</head>
<body>
<div class="parent">
<div class="top">top</div>
<div class="bottom">
bottom
</div>
</div>
</body>
</html>
image.png
2. 指定頂部高度為100
height:100px;
image.png
3. 將下部的div撐滿
將下部的div定位修改成絕對定位适瓦，距離頂部距離修改成100px竿开。底部距離為0
position: absolute; top: 100px; bottom:0;
image.png
修改底部寬度為100%
width:100%
