上下固定中间自适应的html+css布局
这两天做项目的时候遇到一个上面和下面都是固定的,中间的左侧一个侧边栏,右边为主题部分
布局效果
代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css布局</title>
</head>
<style>
*{
padding: 0px;
margin: 0px;
}
.header{
position:absolute;
top:0px;
height:55px;
width: 100%;
background-color: rgb(199, 16, 16);
}
.container{
position:absolute!important;
position:relative;
top:55px!important;/* header的宽度 */
top:0;
bottom:75px;/* footer的宽度 */
width:100%;
overflow:hidden;
height:auto!important;
height:100%;
}
.container>.Aside{
display: inline-block;
width: 200px;
height: 100%;
overflow-y: auto;
background-color: orange;
}
.container>.main{
position: absolute!important;
position: relative;
left: 200px!important;
left: 0;
height: 100%;
overflow:hidden;
width: auto!important;
width: 100%;
background-color: pink;
}
.footer{
position:absolute;
bottom:0px;
height:75px;
width: 100%;
background-color: rgb(199, 16, 16);
}
</style>
<body>
<div class="header"></div>
<div class="container">
<div class="Aside"></div>
<div class="main"></div>
</div>
<div class="footer"></div>
</body>
</html>