javascript 网页左右框架模式动态设定宽度高度，使页面保持屏幕一页显示

最新推荐文章于 2024-09-11 15:33:18 发布

虾米大王

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量361

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/modern358/article/details/115720311

版权

JavaScript 专栏收录该内容

329 篇文章 0 订阅

订阅专栏

    <script>
        window.onload = function () {
            var availWidth = window.screen.availWidth;                                                        //屏幕可用宽度
            var availHeight = window.screen.availHeight;                                                      //屏幕可用高度
            var topHeight = document.getElementById("homeTop").clientHeight;                  //top栏高度 
            var bannerHeight = document.getElementById("homeBanner").clientHeight;        //bannner栏高度
            var footerHeight = document.getElementById("homeFooter").clientHeight;         //footer栏高度
            var innerHeight = window.innerHeight;                                                               //网页部分高度
            var outerHeight = window.outerHeight;                                                             //浏览器整体高度
            var menuToolsHeight = outerHeight - innerHeight;                                             //浏览器菜单栏高度   

            var leftWidth = parseInt(availWidth * 0.2);                                                        //左边栏占20%，但不能超过300px
            var leftHeight = availHeight - topHeight - bannerHeight - footerHeight - menuToolsHeight;
            if (leftWidth >= 300)
            {
                leftWidth = 300;
            }

            var leftSide = document.getElementById("homeLeftSide");                               //左侧边栏div
            var mainContent = document.getElementById("mainContent");                        //右侧主要div
            //window.alert( "leftWidth=" + leftWidth + ",leftHeight=" + leftHeight + ",innerHeight=" +innerHeight + ",outerHeight=" + outerHeight);
            leftSide.style.width = leftWidth + "px";
            leftSide.style.height = leftHeight + "px";
            mainContent.style.width = (availWidth - leftWidth - 5) + "px";
            mainContent.style.height = leftHeight + "px";
           
        }

    </script>

html

<body>
    <div class="homeTop" id="homeTop">
        <div class="homeLogo">
             
        </div>
    </div>
    <form id="form1" runat="server">
    <div class="homeBanner" id="homeBanner">
        <ul>
            <li>系统版本version 1.0</li>
            <li>
                <asp:LinkButton ID="btnUserName" runat="server" Text="" CausesValidation="false" OnClick="btnUserName_Click" OnClientClick="return window.confirm('是否退出系统？')"></asp:LinkButton>
            </li>
        </ul>
    </div>
    <div class="homeLeftSide" id="homeLeftSide">

    </div>
    <div class="homeMainContent" id="homeMainContent">

    </div>
    <div class="homeFooter" id="homeFooter">

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