使用js将div高度设置为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
}
试试看?!
使用js将div高度设置为100%的更多相关文章
- HTML学习之给div高度设置百分比不生效的问题
这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: < ...
- div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...
- JS获取div高度的方法
有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...
- 父元素高度设置为min-height,子元素高度设置为100%,但实际上子元素高度你知道是多少吗?
前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...
- 微信小程序高度设置为100%
在网页中设置body,html{height:100%}; 将body和html设置为100%,这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦. 但是在微 ...
- js改变div高度
用bootsrap响应式布局的时候,遇到个很恶心的问题:左边栏很短很难看!! 于是,想用js来自动改变左边的高度,没成功!!原来是设置的时候,没加单位,坑爹了. 参考:http://blog.sina ...
- DIV高度设置全屏
<div class="full"></div> .full{ height:100%; position:fixed; } 使用position的fixe ...
- js为DIV动态设置id属性
<script> var objs=document.getElementById("iproduct").getElementsByTagName("div ...
- DIV宽度设置成100%,浏览器窗口缩小后,右边出现留白
解决办法:给body添加min-width属性
随机推荐
- html常用标签及属性,常用英语单词
目录 html常用标签 html常用标签属性 前端常用英语单词表(未完待续) 欢迎评论点赞交流,转发请添加原博客连接谢谢! Ctrl键+F 可以查找你想要的内容哦! html常用标签 htmi结构 & ...
- 【BZOJ 2243】染色
传送门:洛谷 BZOJ 还不会LCT的小伙伴可以看一下这篇博客:LCT总结 我初学动态树时就是看着那篇博客学的,写的很好! 那好 言归正传. 显然树上 x 到 y 的路径的问题都可以用LCT Ac ...
- 《机器学习实战》-k近邻算法
目录 K-近邻算法 k-近邻算法概述 解析和导入数据 使用 Python 导入数据 实施 kNN 分类算法 测试分类器 使用 k-近邻算法改进约会网站的配对效果 收集数据 准备数据:使用 Python ...
- PHP composer 日常使用命令和理解
composer的操作很多很杂,平时大都用不上,正要找又一时半会难找到 日常操作,走起 第一部分 : 安装 composer.json composer init 这个命令创建了一个 composer ...
- jmeter的Include Controller控件和Test Fragment控件和Module Controller控件
1.Include Controller控件——给当前jmeter脚本引入外部片段的jmeter脚本(Test Fragment片段脚本) Include Controller控件——添加外部jmet ...
- Linux —— awk命令
- 作用: 强大的文本分析工具,对于文本分析来说绝对是一把利器 - 语法: awk '{pattern + action}' {filenames} pattern需要查找的内容 action 查找到 ...
- MapReduce项目之气温统计
在本博文,我们要学习一个挖掘气象数据的程序.气象数据是通过分布在美国全国各地区的很多气象传感器每隔一小时进行收集,这些数据是半结构化数据且是按照记录方式存储的,因此非常适合使用 MapReduce 程 ...
- readonly与const的区别
readonly 关键字与 const 关键字不同.const 字段只能在该字段的声明中初始化.readonly字段可以在声明或构造函数中初始化.因此,根据所使用的构造函数,readonly字段可能具 ...
- Java基础:(七)反射
一.什么是反射 理解反射之前,先要搞懂一件事情,类加载到底是怎么一回事? 类加载相当于Class对象的加载.每个类都有一个Class对象,包含了与类有关的信息.当编译一个新类时,会产生一个同名的.cl ...
- zuul的本地跳转