使用javascript解决高度设置100%无法生效的问题
时间:2018-09-18
本文章向大家介绍使用javascript解决高度设置100%无法生效的问题,需要的朋友可以参考一下
在开发的工程中使用到了一些开源的bootstrap模板进行开发,在遇到一些需要替换的内容部分部分时,经常出现高度设置100%无法生效的问题,这里来用js强行设置一下。
思路:js监听窗口的缩放行为,然后动态获取浏览器的窗口可见大小,然后如果你的页面有页头页尾的话,掐头去尾,得到的就是内容部分100%时的高度,赋值进去便可。
代码:
window.onload=function(){
changeDivHeight();
}
//当浏览器窗口大小改变时,设置显示内容的高度
window.onresize=function(){
changeDivHeight();
}
function changeDivHeight(){
var h = document.documentElement.clientHeight;//获取页面可见高度
document.getElementById("framediv").style.height=h-102+"px";//掐头去尾,减去100px
}
试试看?!
- 18.CSS
- R语言可视化——ggplot图表系统中的形状
- [机器学习Lesson 1 Introduction] 机器学习的动机与应用
- 洛谷P3377 【模板】左偏树(可并堆)
- Numpy 修炼之道 (12)—— genfromtxt函数
- 19.JavaScript
- 20.DOM
- 洛谷P3273 [SCOI2011]棘手的操作
- [机器学习Lesson 2]代价函数之线性回归算法
- Docker初尝试1.What is Docker?2.Try It3.Use It
- 洛谷P1456 Monkey King
- 21.jQuery
- Session分布式共享 = Session + Redis + Nginx
- 22.jQuery(实例)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 软技能提升:转转中后台规范落地实践
- python面试题搜集(三)
- 什么是计算机网络?为什么需要网络通信?如何进行网络编程?
- Python中好用又高效的Collections 模块
- 正确创建Python二维数组
- 深入理解Python内存管理与垃圾回收,再也不怕问了(一)
- 走进面向“对象”编程的理想国(一)——深入理解Python中的一切皆对象
- 深入理解Python内存管理与垃圾回收,再也不怕问了(二)
- 如何利用Python实现二分查找(迭代和递归)
- 详解排序算法(Python实现)
- Python垃圾回收机制
- iOS 开发:『Crash 防护系统』(二)KVO 防护
- 学Java到底学什么
- Python 的魔法方法及用途
- 四件简单的事情,帮助改善部署过程