直接贴代码了：

<!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>

运行效果：

谢谢浏览！

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

  1. Div 自适应屏幕大小

    http://blog.csdn.net/wodetiankong516/article/details/7827256 Background      有时, 我们需要将div或者其他的Elemen ...

  2. 怎么可以让div自适应屏幕的高度？（已解决）

    主要解决问题的方法是用JS脚本. 先看布局, 一个div是首部,另一个div是主体,主体包含左侧菜单和右侧内容. 我想把主体div的高度自适应屏幕剩余区域,怎么做? 首先,获取可见区域的高度,docu ...

  3. 限制div高度当内容多了溢出时显示滚动条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"content= ...

  4. Android 中Webview 自适应屏幕

    随笔 - 478  文章 - 3  评论 - 113 Android 中Webview 自适应屏幕   webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomCon ...

  5. [转载]Android中WebView自适应屏幕

    webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomControls(false); //隐藏webview缩放按钮 让Webview加载的页面居中显示有我知道的 ...

  6. 利用onresize使得div可以随着屏幕大小而自适应的代码

    原文:http://www.jb51.net/article/21831.htm 当我们让div居中时候,一般有两种方法,一种是固定左右宽度,也就是使用像素绝对定位:另一种是用百分比来相对定位,在这种 ...

  7. #region 自适应屏幕分辨率

            #region 自适应屏幕分辨率 [StructLayout(LayoutKind.Sequential, CharSet = CharSet.Auto)]        public ...

  8. Unity3D NGUI自适应屏幕分辨率（2014/4/17更新）

    原地址:http://blog.csdn.net/asd237241291/article/details/8126619 原创文章如需转载请注明:转载自 脱莫柔Unity3D学习之旅 本文链接地址: ...

  9. JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素

    一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...

随机推荐

  1. WPF——如何为项目设置全局样式。

    在项目中,需要为所有的Button.TextBox设置一个默认的全局样式,一个个的为多个控件设置相同的样式显然是不明智的.在WPF中可以通过资源设置全局样式,主要有俩种方法: 1.第一种就是先写好按钮 ...

  2. [目录] -- 计划翻译一些有关CLR/C#的基础内容，希望能坚持下去

    主要内容有以下部分(URL待补充): CLR 和Windows Loader 加载.NET Assembly的过程 CLR加载失败分析分析 Windows内存架构模型,分配内存及垃圾回收 其他带补充的 ...

  3. Web基础--HTML、Css入门

    一.Web项目(可跳过,直接从下一个标题开始) 1.Web项目: 指的是带网页的项目,通过浏览器可以访问的项目.比如:淘宝.天猫等. 2.Web项目构成: 浏览器(客户端).服务器.数据库. 3.Ja ...

  4. Python当中的array数组对象

    计算机为数组分配一段连续的内存,从而支持对数组随机访问:由于项的地址在编号上是连续的,数组某一项的地址可以通过将两个值相加得出,即将数组的基本地址和项的偏移地址相加.数组的基本地址就是数组的第一项的机 ...

  5. hook declined to update refs/heads/dev

    提交一个项目,push的时候,报错: warning: Large files detected. remote: error: File TaodangpuAuction/TaodangpuAuct ...

  6. Android,百度,云知声tts总结

    最近在做Android语音播报功能(TTS),现总结如下:(ps:demo代码地址:https://github.com/giserlong/TTS_DEMO) 一.Android原生接口 用Andr ...

  7. 【XML】XML基本结构以及XML-Schema约束

    XML 简介 1998年2月,W3C正式批准了可扩展标记语言的标准定义,可扩展标记语言可以对文档和数据进行结构化处理,从而能够在部门.客户和供应商之间进行交换,实现动态内容生成,企业集成和应用开发.可 ...

  8. css伪类实现行号自动填充

    css伪类实现行号自动填充 大多数时候我们需要行号自动填充的时候我们可以 大多数时候是插入元素, 在元素里用js填入行号,或者用 ol > li 实现行号填充, 对于上面的方式,都不太灵活,而且 ...

  9. js的运用

    JS数组的4种声明方法: //第一种 ,,,,] console.log(A) //第二种 var B=new Array(); B[]= B[]= B[]= console.log(B)//第三种 ...

  10. 第16讲：ODBC&JDBC简介

    一.ODBC简介 1. ODBC的概念 ①ODBC:Open DataBase Connection,即开放数据库连接 ②ODBC是一种标准,它规定了不同语言的应用程序与不同数据库服务器之间通讯的方式 ...