在HTML5中如何设置屏幕百分比_随笔

<!DOCTYPE html>

<head>

</head>

.head{width: 1000pxheight: 200pxmargin:0 auto}

.head-a{width: 30%height: 200pxbackground: bluefloat: left}

.head-b{width: 70%height: 200pxbackground: orangefloat: right}

</style>

<body>

</div>

</body>

</html>

我们可以使用width：30%和width：70%这样的形式来设置百分比

原理：

先给父级<div>设置宽度（像素）

然后再子<div>里，设置百分比，如图示。

代码原件：

复制到<body></body>之间使用即可。

这种情况应该只能结合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)

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

欢迎分享，转载请注明来源：内存溢出

在HTML5中如何设置屏幕百分比