首页 > 如何完成自适应三栏等高

如何完成自适应三栏等高

我希望有这种效果:

  1. 第一区固定宽度300px
  2. 第二区固定宽度50px
  3. 第三区填满浏览器剩余宽度
  4. 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

【热门文章】
【热门文章】