html 填满父容器,如何实现div填充父容器的剩余宽度空间

很多朋友曾经碰到过这样的需求，有两个div，第一个固定宽度，第二个需要填满整个父容器的剩余宽度。如何实现？

下面讲解一个小技巧，但局限很多。

.parent{

width:100%;

}

/**

*用于清除浮动造成的父容器不能被撑开

*/

.parent:before,

.parent:after {

content: " ";

display: table;

}

.parent:after {

clear: both;

}

/***********************/

/***********你必须保证left标签写在right的后面,否则需要设置left的z-index************/

.left{

display: block;

width:200px;

float: left;

}

.right{

display: block;

width:100%;

padding-left:200px;

float: left;

}

如上面所示，此外CSS3的width属性新加了一个东东，类似下面：

width:calc(100%-200px);把它直接加入到right，替换以上所有的style，这样也可以实现，但是这个属性值较新，兼容性看这里浏览器对CSS width:calc属性值的兼容