html 怎么按百分比设置div高度_随笔

原理：

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

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

代码原件：

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

CSS想让一个元素的百分比高度height: 100%起作用，需要给这个元素的所有父元素的高度设定一个有效值。如下所示就可以让div高度为100%了：

<p>

这样这个div的高度就会100%了

</p>

</div>

</body>

</html>

在使用height: 100%时需要注意的一些事项

1、Margins 和 padding 会让你的页面出现滚动条，也许这是你不希望的。

2、如果你的元素实际高度大于你设定的百分比高度，那元素的高度会自动扩展。

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

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

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

html 怎么按百分比设置div高度