DIV 布局之上下布局上固定下自动适应
2019-10-27 本文已影响0人
出来混要还的
效果
<!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>顶部固定下部自动适应</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>顶部固定下部自动适应</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%
