我希望有这种效果:
- 第一区固定宽度300px
- 第二区固定宽度50px
- 第三区填满浏览器剩余宽度
- 3个的高度已最高的区为准,如图所示第三区最高所以第二区和第一区 都拉长到与第三区相同的高度。
如果都用width:x% 就可以。
比方说 .box1(width:20%) .box2(width:5%) .box3(width:75%)
http://jsfiddle.net/fLL9V/
先给第三个子元素添加上 BFC
使其可以自适应宽度.
再使用 padding
把高度扩展到足够高, 然后用 margin
负值把它给拉回来,
最后在父元素添加 overflow:hidden
隐藏溢出.
http://jsfiddle.net/cVNT7/2/
方法一:把三个元素都设为 display:table-cell
http://jsfiddle.net/fishenal/ygS6b/embedded/result,html
http://jsfiddle.net/fishenal/ygS6b/
方法二:
参考这里
http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent
用绝对定位和height:auto 实现子元素高度继承父元素
http://jsfiddle.net/fishenal/3tNZW/embedded/result,html/
http://jsfiddle.net/fishenal/3tNZW/
sf bug 反馈,无法自动载入带参数的jsfiddle