通过js脚本，利用$(window).height()和$(window).weight()进行盒子的自适应调配

最新推荐文章于 2024-04-30 10:11:53 发布

原创最新推荐文章于 2024-04-30 10:11:53 发布 · 870 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#$(window).height() #$(window).weight() #自适应

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的自适应网页布局方法，通过计算窗口大小调整左侧和右侧区域的高度和宽度，确保在不同设备上都能保持良好的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在网页布局为头部左侧和右侧。现在通过脚本来计算子左侧和右侧的自适应

html结构
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
  
    <div class="page-header-inner">
    </div>
    <div class="leftTab js-leftTab">
        <div class="searchTab js-searchTab1">
            <div class="searchInput ">
        </div>
    </div>
    <!-- END 左侧 -->
    <!-- BEGIN 右侧 -->
    <div class="videoRight js-videoRight">
        
    </div>
    <!-- ENG 右侧 -->

</body>
</html>

javascript
<script type="text/javascript">
        jQuery(document).ready(function() {
            /*视频框架*/
             /左侧盒子的高度=当前window的高度减去头部的高读-div盒子之间的间隔以及margin和padding*/
            $(".js-leftTab").height($(window).height() - $(".page-header-inner").height() - 25);
          
            /*右侧高度*/
            $(".js-videoRight").height($(".js-leftTab").height());
            $(".js-videoRight").width($(window).height() - $(".js-leftTab").width());
            
            /*浏览器每一次被放大或者缩小都重新计算高度*/
            $(window).resize(function() {
                $(".js-leftTab").height($(window).height() - $(".page-header-inner").height() - 25);
              
                /*右侧高度*/
                $(".js-videoRight").height($(".js-leftTab").height());
                $(".js-videoRight").width($(window).height() - $(".js-leftTab").width());
             
            });
        });
    </script>