使用五种方法来实现DIV的一边固定一边自适应写法,并分析各自特点。
第一种(CSS3):
.wrapper1, .wrapper2, .wrapper3, .wrapper4, .wrapper5{
width: 100%;
height: 100%;
min-height: 300px;
line-height: 200px;
overflow: hidden;
margin: 30px 0;
position: relative;
}
.wrapper1 .custom{
width: 200px;
border-right: 1px solid white;
}
.wrapper1 .auto{
width: calc(100% - 201px);
}
.wrapper1 .custom, .wrapper1 .auto{
height: 200px;
float: left;
color: white;
background: black;
}
现在CSS3都已经普及了,移动端更是,通常使用CSS3较多,所以第一种就是利用CSS3来写了。
CSS3中新增一种新的属性 CALC :
使用方法: width: calc(100% - 200px);
这一功能通俗易懂,简单的加减乘除谁不会啊,只需要了解盒子宽高(padding + margin + border),若使用border-box除外。
自适应盒子一个100%宽 - 固定盒子宽 = 自适应的宽。
第二种(CSS3):
.wrapper2 .custom, .wrapper2 .auto{
height: 200px;
color: white;
background: black;
position: absolute;
top: 31px;
}
.wrapper2 .custom{
width: 200px;
border-right: 1px solid white;
left: 0;
z-index: 1;
}
.wrapper2 .auto{
left: 0;
width: 100%;
padding-left: 200px;
box-sizing: border-box;
}
利用绝对定位来写,给父元素一个相对定位,固定与自适应盒子各一个绝对定位,当然你也可以只给第二个盒子。
没太多要点,需要注意的就是在box-sizing这里需设置borde-box。
脱离了文档流的DIV宽度100%是等于设备像素宽,