左侧栏固定右侧栏自适应的布局在开发过程中真的可谓是屡见不鲜,今天我们就来聊聊这个司空见惯的布局方式。。。啦啦啦。。。
首先把html的基本骨架写出来,代码如下:
<div class="container"> <div class="left"></div> <div class="right"></div> </div>
第一种:左侧浮动,右侧宽度百分比,margin-left为左侧栏的宽度值
html,body{
height: 100%;
margin: 0;
padding: 0;
}
div.container{
height: 100%;
width: 100%;
background-color: ghostwhite;
}
div.left{
height: 100%;
width: 300px;
float: left;
background-color: deeppink;
}
div.right{
width: 100%;
background-color: aqua;
height: 100%;
margin-left: 300px;
}
第二种:子绝父相,父亲设置相对定位,儿子设置绝对定位,左侧宽度固定,右侧栏还是和第一种一样
html,body{
height: 100%;
margin: 0;
padding: 0;
}
div.container{
height: 100%;
width: 100%;
background-color: ghostwhite;
position: relative;
}
div.left{
height: 100%;
width: 300px;
position: absolute;
left: 0px;
background-color: deeppink;
}
div.right{
width: 100%;
background-color: aqua;
height: 100%;
margin-left: 300px;
}
第三种:通过给右侧栏设置overflow:hidden,触发BFC,什么是你BFC?简单说就是一个块级元素不会和别的浮动元素进行重叠
div.container{
height: 100%;
width: 100%;
background-color: ghostwhite;
}
div.left{
height: 100%;
width: 300px;
float:left;
background-color: deeppink;
}
div.right{
width: 100%;
background-color: aqua;
height: 100%;
overflow:hidden;
}
第四种:左侧栏float:left,右侧栏float:right,右侧栏设置负边距,margin的负边距博大精深!
div.container{
height: 100%;
width: 100%;
background-color: ghostwhite;
}
div.left{
height: 100%;
width: 300px;
float:left;
background-color: deeppink;
}
div.right{
width: 100%;
background-color: aqua;
height: 100%;
float: right;
margin-right: -300px;
}
第五种:使用flex弹性布局,把container设置为flex即可
div.container{
height: 100%;
width: 100%;
background-color: ghostwhite;
display: flex;
}
div.left{
height: 100%;
width: 300px;
background-color: deeppink;
}
div.right{
width: 100%;
background-color: aqua;
height: 100%;
}
第六种:使用table布局进行实现,外层设置display: table,内层设置display:table-cell,就是等高布局了,但是右侧不能设置宽度才行!
div.container{
height: 100%;
width: 100%;
background-color: ghostwhite;
display: table;
}
div.left{
height: 100%;
width: 300px;
background-color: deeppink;
display: table-cell;
}
div.right{
background-color: aqua;!
height: 100%;
display: table-cell;
}
上述所有的内容都经过本人亲自测试
真心的希望能对大家在布局方面有所帮助!!!相互学习一起提高!