本文介绍如何使用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>