利用 Javascript 让 DIV 自适应屏幕的分辨率,从而决定是否显示滚动条
直接贴代码了:
<!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 自适应屏幕的分辨率,从而决定是否显示滚动条的更多相关文章
- Div 自适应屏幕大小
http://blog.csdn.net/wodetiankong516/article/details/7827256 Background 有时, 我们需要将div或者其他的Elemen ...
- 怎么可以让div自适应屏幕的高度?(已解决)
主要解决问题的方法是用JS脚本. 先看布局, 一个div是首部,另一个div是主体,主体包含左侧菜单和右侧内容. 我想把主体div的高度自适应屏幕剩余区域,怎么做? 首先,获取可见区域的高度,docu ...
- 限制div高度当内容多了溢出时显示滚动条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"content= ...
- Android 中Webview 自适应屏幕
随笔 - 478 文章 - 3 评论 - 113 Android 中Webview 自适应屏幕 webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomCon ...
- [转载]Android中WebView自适应屏幕
webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomControls(false); //隐藏webview缩放按钮 让Webview加载的页面居中显示有我知道的 ...
- 利用onresize使得div可以随着屏幕大小而自适应的代码
原文:http://www.jb51.net/article/21831.htm 当我们让div居中时候,一般有两种方法,一种是固定左右宽度,也就是使用像素绝对定位:另一种是用百分比来相对定位,在这种 ...
- #region 自适应屏幕分辨率
#region 自适应屏幕分辨率 [StructLayout(LayoutKind.Sequential, CharSet = CharSet.Auto)] public ...
- Unity3D NGUI自适应屏幕分辨率(2014/4/17更新)
原地址:http://blog.csdn.net/asd237241291/article/details/8126619 原创文章如需转载请注明:转载自 脱莫柔Unity3D学习之旅 本文链接地址: ...
- JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素
一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...
随机推荐
- python读取Excel的值
上代码: import pandas as pd if __name__ == '__main__': #默认的读取第一个sheet df = pd.read_excel("E:\\MyPr ...
- git clone: HTTP Basic: Access denied 错误
git clone 报 HTTP Basic: Access denied 错误 解决方案: 1. 如果账号密码有变动 用这个命令 git config –-system –-unset creden ...
- 移动端适配方案(rem+flex)
为什么用rem不用px? 主流:各大网站的移动版绝大多数都是用的rem. 移动端屏幕分辨率差别太大:最低适配的iPhone6,分辨率仅为750*1334.而现在市面上大多数手机,都达到了1080* ...
- SILK编码语音转WAV格式
- SILK编码 SILK采样率可为8.12.16或24 kHz,比特率可为6至40 kbit/s.对应到报文层面的直观印象,即SILK编码的语音数据每帧长度是不等的. SILK编码已经开源,目前可下 ...
- Android之okhttp实现socket通讯(非原创)
文章大纲 一.okhttp基础介绍二.socket通讯代码实战三.项目源码下载四.参考文章 一.okhttp基础介绍 https://www.jianshu.com/p/e3291b7808e7 ...
- js 判断当前时间是否处于某个一个时间段内
js 判断当前时间(或者所选时间)是否在某一时间段 我们可以使用 jutils - JavaScript常用函数库的 isDuringDate 函数来实现 传入 beginDateStr (开始时间) ...
- 08 在设备树里描述platform_device【转】
转自:https://blog.csdn.net/jklinux/article/details/78575281 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原 ...
- 30.Java基础_接口_抽象类_具体类实现案例
public interface SpeakEnglish { public abstract void speak(); } public abstract class Person { priva ...
- 【cf600】E. Lomsat gelral(dsu on tree)
传送门 题意: 求子树众数. 思路: \(dsu\ on\ tree\)模板题,用一个桶记录即可. 感觉\(dsu\ on\ tree\)这个算法的涉及真是巧妙呀,保留重链的信息,不断暴力轻边,并且不 ...
- 在安装完jdk以后,发现javac不能执行
安装和配置环境变量都按着流程在,但在最后的检验时,发现Java Java -version 都能运行,唯独Javac 报“不能识别命令”错误信息,下面列出我遇到一个尴尬问题 在path变量里