jQuery实现标签高度为屏幕百分比的方法

作者:窗边听雨

时间:2026-10-22

浏览:371

本文介绍如何使用jQuery动态设置HTML元素的高度,使其占浏览器窗口高度的特定百分比。通过获取body的clientHeight并乘以预设比例,实现响应式高度调整,适用于需要自适应屏幕尺寸的布局场景。

文章目录

HTML结构定义

HTML结构部分如下:

HTML代码示例


<body>
<div id="margin_box"></div>
</body>

jQuery动态设置高度

jQuery脚本部分如下:

jQuery代码示例


<script>
   $(function(){
       var percent =0.15; 
       $("#margin_box").css("height",window.document.body.clientHeight*percent)
   })
</script>

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章