1、右边固定,左边自适应
注意:右边的块写上面
<div class="right"></div>
<div class="left"></div>
.right{
width: 100px;
height: 100px;
position: absolute;
background-color: red;
right: 0px;
}
.left{
height: 100px;
margin-right: 100px;
background-color: green;
}
效果图
2、左右固定,中间自适应
注意:先写右边、左边、最后才是中间的div
<div style="width:100%; margin:0 auto;">
<div style="width:200px; float:right; background-color:#960;height:200px">1</div>
<div style="width:150px; float:left; background:#6FF;height:200px">2</div>
<div style="margin-left:150px;margin-right:200px; background-color:#9F3;height:200px">3</div>
</div>
效果图
3、左边固定,右边自适应
<div id="sidebar" style="height:300px;">固定宽度区</div>
<div id="content" style="height:300px;">自适应区</div>
#sidebar {
float: left;
width: 300px;
background-color:pink;
top:50px;
left:0;
}
#content {
margin-left: 300px;
height:1000px;
background-color:#e456aa;
margin-top:50px;
}
效果图
4、上下固定,中间自适应
上中下三行,头部200px高,底部200px高,中间自适应占满
<div class="divBox">
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>
</div>
*{
margin:0px;
padding: 0px;
}
.divBox{
background: yellow;
width: 100%;
}
.top{
background: red;
width: 100%;
height: 200px;
position: absolute;
top: 0;
}
.center{
width: 100%;
background: grey;
position: absolute;
top: 200px;
bottom: 200px;
}
.bottom{
width: 100%;
background: green;
height: 200px;
position: absolute;
bottom: 0;
}
效果图
5、上下两部分,底下这个固定高度200px,如果上面的内容少,那么这个footer就固定在底部,如果内容多,就把footer挤着往下走
<div class="divBox">
<div class="content"></div>
<div class="footer"></div>
</div>
*{
margin: 0px;
padding: 0px;
}
html{
height: 100%;
}
body{
min-height: 100%;
position: relative;
}
.content{
width: 100%;
background:red;
padding-bottom: 200px;
}
.footer{
width: 100%;
height: 200px;
background: green;
position: absolute;
bottom: 0;
}