利用 Javascript 让 DIV 自适应屏幕的分辨率，从而决定是否显示滚动条

本文转载自查看原文 2019-03-22 22:39 608 Javascript

直接贴代码了：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="resources/scripts/jquery-1.10.1.min.js"></script>
</head>
<body>
    <div class="core-title">
        <h2>这里是标题</h2>
    </div>
    <div id="coreComparisonReportDiv" style="overflow-y:scroll; ">
        <div class="tableShow">
            <table style="width:5000px;">
                <thead>
                    <tr>
                        <th>Remark</th>
                        <th>Data Set</th>
                        <!-- 假设这里还有很多列 -->
                    </tr>
                </thead>
                <tbody>
                    <tr style="">
                        <td style="width:120px; ">No Change</td>
                        <td style="width:250px; ">2019-03-15</td>
                        <!-- 假设这里还有很多列 -->
                    </tr>
                    <!-- 假设这里还有很多行 -->
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

下面是 Javascript 脚本：

    <script type="text/javascript">
        $(document).ready(function () {
            calcCoreComparisonReportDivHeight();
        });
        function getTableSuggestHeight(id, errorHeightValue) {
            var jTable = $('#' + id);
            if (jTable.length == 0) {
                return;
            }
            var windowHeight = $(window).height();
            var jTableOffsetTop = jTable.offset().top;
            var iframeOffsetTop = 0;
            if (window.parent != null) {
                var appDivObj = window.parent.document.getElementById("app");
                if (appDivObj) {
                    var appDivObjOffsetTop = appDivObj.offsetTop;
                    iframeOffsetTop = appDivObjOffsetTop;
                }
            }
            var tempErrorHeightValue = 10;
            if (errorHeightValue) {
                tempErrorHeightValue = errorHeightValue;
            }
            var suggestHeight = windowHeight - jTableOffsetTop - iframeOffsetTop - tempErrorHeightValue; // 10 为误差
            if (suggestHeight < 200) {
                suggestHeight = 200; // 为了兼容 1024*768 的显示屏，最小高度 200
            }
            return suggestHeight;
        }
        function calcCoreComparisonReportDivHeight() {
            var coreComparisonReportDivId = "coreComparisonReportDiv";
            var coreComparisonReportDivHeight = getTableSuggestHeight(coreComparisonReportDivId);
            $("#" + coreComparisonReportDivId).height(coreComparisonReportDivHeight);
        }
        $(window).resize(function () {
            calcCoreComparisonReportDivHeight();
        });
    </script>

运行效果：

谢谢浏览！

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 WinForm 根据屏幕分辨率自适应窗体自适应屏幕分辨率 pc端，自适应屏幕分辨率 rem实现页面自适应屏幕分辨率 Unity3d屏幕分辨率自适应问题 Unity 3D手游对不同分辨率屏幕的UI自适应 android 图片大小适配，如何在不同屏幕上适配图片，如何设置可以自适应不同分辨率？字体大小自适应屏幕分辨率 CSS解决方案 Delphi：窗体自适应屏幕分辨率（根据预设值的比例改变） Android自适应不同分辨率或不同屏幕大小的layout布局(横屏|竖屏)