虽然框架不利于网站优化,但在类似于业务系统的后台中使用的还比较频繁。起初在写的时候,框架的高度与宽度的兼容着实让我很头疼。经过多方面查找资料,及通过自己的实践,特总结以下控制框架宽度与高度的方法。

主要是通过以下js控制框架的高度与宽度:

<script type="text/javascript">
    $(function () {
        layoutrezise();
        AutoHeight();
    })
    function layoutrezise() {
        var headerH = $("div#Headbox").height(); //获取头部的高度
        var bodyerH = $(window).height() - headerH;  //计算内容的高度(不包括头部)
        $("div#Bodybox,div#bleftBox,div#brightBox,iframe#leftiframe,iframe#mainframe").height(bodyerH); //设置主框架的高度
        $("div#brightBox").width($(window).width() - $("div#bleftBox").width()); //设置主框架的宽度
    }
    function AutoHeight() {
        $(window).resize(function () {
            layoutrezise();
        })
    }        
</script>

页面的主要代码如下:

<body>
    <div ></div>
    </div>
</body>

大家可以通过div的结构对就js看每段代码的意思。。。根据自己实际情况进行取舍与修改~最后附上截图,希望能帮到遇到此问题的各位~

让框架的高度自适应

相关文章:

  • 2021-12-29
  • 2021-12-11
  • 2021-06-28
  • 2021-12-28
  • 2021-12-30
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-12-04
  • 2022-01-30
  • 2022-12-23
  • 2022-12-23
  • 2022-01-20
  • 2021-10-11
  • 2021-07-18
相关资源
相似解决方案