解决HTML中设置宽或高为百分比时无效的问题

Posted 2022-12-03 张文琪2022

在开发web项目时，为了适应浏览器分辨率，所以不免会使用到如下述代码

<div style="width:100%">
	....
</div>

然而有时候会发现这种方法是无效的。
一般情况下，造成这种问题的原因是由于百分比是相对于父类元素而言的，换句话说必须得有一个确定宽高的父类元素，其下的子类才能用百分比。我们可以用js把body标签设置成和浏览器窗口一样大小，代码如下（JQuery）：

$(function () 
    $("body").height($(window).height());
    $("body").width($(window).width());
    $(window).resize(function () 
        $("body").height($(window).height());
        $("body").width($(window).width());
    )
)