直接贴代码了:

<!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. 配置sshd的免密码登录

    在客户端上生成密钥: ssh-keygen -t rsa 然后上传到服务器上即可: ssh-copy-id username@remote-server -p22

  2. Python爬取6271家死亡公司数据,看十年创业公司消亡史

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 朱小五 凹凸玩数据 PS:如有需要Python学习资料的小伙伴可以加 ...

  3. maven使用问题总结

    maven dependencies 报红叉的问题: 第一种:检查bulid path 里面maven dependencies 是否丢失包 miss jar. 解决方法1:https://blog. ...

  4. SAP系统玩阴的?

    SAP系统玩阴的? 近日和项目上的ABAP开发顾问一起弄一个自开发的报表.其中某个栏位的取值需要从批次主数据里抓取到供应商代码,然后根据供应商代码取到供应商名称等.为此笔者需要备功能说明书.在说明书里 ...

  5. 一次Ubuntu16系统的找回root密码的过程

    一 背景知识介绍 ubuntn系统的默认配置,超级用户root的密码是随机的,如果没提前对root用户的密码进行设置, 是不能直接通过root的身份来进行某些操作的,必须使用sudo命令,并通过普通用 ...

  6. MySQL第三课

    首先创建一个数据库: CREATE DATABASE ku; Query OK, 1 row affected 查看一下是否有此数据库: SHOW DATABASES; +-------------- ...

  7. (办公)vue下载excel,后台用post方法

    后台方法的参数必须是@RequestBody修饰的. 前台关键代码: axios ( { method : 'post', url : api.exportPlayTime , // 请求地址 dat ...

  8. linux工作队列 - workqueue总览【转】

    转自:https://blog.csdn.net/cc289123557/article/details/52551176 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载 ...

  9. Shell命令-用户用户组管理之useradd、usermod

    文件及内容处理 - useradd.usermod 1. useradd:添加用户 useradd命令的功能说明 useradd 命令用于建立用户帐号.useradd 可用来建立用户帐号.帐号建好之后 ...

  10. 6、zabbix自定义监控

    一.概述 为什么需要自定义监控呢? 虽然zabbix已经给我们准备好了很多的模板,但是有的东西还是无法监控,这时候就要我们自定义监控了. 自定义监控的思路? 比如我们现在想要监控这个值,如下所示,模板 ...