使用padding计算高度实现页面的高度自适应

通过使用padding而非margin来计算元素高度,可以确保DOM元素内容在设定的容器内,实现页面高度自适应。当表格高度超过计算值时,表格内部会出现滚动条,而浏览器则保持无滚动条状态。在窗口大小变化时,通过监听并重新计算高度,保持布局的自适应性。使用padding的好处在于,offsetHeight始终能准确获取包括padding在内的完整DOM高度,简化了高度计算和调整的过程。
摘要由CSDN通过智能技术生成

为什么说要使用padding来计算高度而不是margin呢,这是因为对于每一个dom元素来讲,padding的高度是包含在dom元素内的,而margin是在dom元素之外的。

我举个例子,看如下图

如果我想计算这个表格的高度,并且让这个表格处于蓝色的方框内,如果表格的高度超过了计算的高度,那么表格内部就会产生滚动条。并且不论怎么缩放浏览器窗口,浏览器都不会有滚动条,这就是我想要实现的自适应。

这里的标题采用的也是padding,而不是margin,然后我们现在来计算一下表格的高度。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值