html百分比布局缩放自适应

1.左侧固定右侧自适应-定位 步骤:

左侧宽度写死——》定位——》给父元素设置左padding即可

右侧宽度不用设置(自适应)

2.浮动+触发BFC 拓展:想详细了解BFC戳这里 overflow:hidden 会触发盒子的BFC 触发BFC的盒子的特点: 解决margin的塌陷 清除浮动 ...

这种情况应该只能结合js来调整了吧。

分别获取左右两栏的高度，对比，得到最高的那栏，将低的一栏设定为高的那栏就好。

js：

var LH = document.getElementById( "left" ).offsetHeight

var RH = document.getElementById( "right" ).offsetHeight

if(LH >RH){

document.getElementById( "right" ).style.height = LH

} else{

document.getElementById( "left" ).style.height = RH

}

但是这个有个弊端，需提前知道各自是否设定了padding值，有设定的话，还得减去该值。

可以使用jq获取padding值的。

jq：

var lh = $("#left").height()//绝对高度，不包括padding-top和pm

var lhpt = $("#left").css('padding-top').replace("px", "")

var lhpm = $("#left").css('padding-bottom').replace("px", "")

var rh = $("#right").height()

var rhpt = $("#right").css('padding-top').replace("px", "")

var rhpm = $("#right").css('padding-bottom').replace("px", "")

var lh2 = lh + lhpt + lhpm

var rh2 = rh+rhpt + rhpm

if(lh2 >rh2){

$("#right").height(lh2 - rhpt - rhpm)

}else{

$("#left").height(rh2 - lhpt - lhpm)

}//就是得计算多个值来比较

---