使用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属性
随机推荐
- 深入Java集合学习系列:HashSet的实现原理
1. HashSet概述: HashSet实现Set接口,由哈希表(实际上是一个HashMap实例)支持.它不保证set 的迭代顺序:特别是它不保证该顺序恒久不变.此类允许使用null元素. 2. H ...
- 基于ZFAKA二次开发,添加PayJS支付渠道
项目地址:https://github.com/hiyouli/payjs-for-zfaka 关于ZFAKA,请移步:ZFAKA 免费.安全.稳定.高效的发卡系统,值得拥有! 演示地址:http:/ ...
- [题解](同余)POJ_3696_The Luckiest Number
还是挺难的吧......勉强看懂调了半天 首先表达式可以写成 8(10^x -1)/9,题意为求一个最小的x使L | 8(10^x -1)/9 设d=gcd(L,8) L | 8(10^x -1)/9 ...
- struts2 具体学习资料
[struts2]<package>的配置:https://www.cnblogs.com/ningvsban/p/3734562.html struts2 具体学习资料 :http:/ ...
- E. Karen and Supermarket
E. Karen and Supermarket time limit per test 2 seconds memory limit per test 512 megabytes input sta ...
- undefined is not a function
具体报错 TypeError: c:\Users\Administrator\WebstormProjects\blogtest\views\index.ejs:1 >> 1| <% ...
- Java并发工具类CountDownLatch源码中的例子
Java并发工具类CountDownLatch源码中的例子 实例一 原文描述 /** * <p><b>Sample usage:</b> Here is a pai ...
- 常用API(Object、String、StringBuffer、用户登陆注册)
常用API 今日内容介绍 u Object u String u StringBuilder 第1章 Java的API及Object类 在以前的学习过程中,我们都在学习对象基本特征.对象的使用以及对象 ...
- C++运算符重载讲解与经典实例
最近在学C++,找到一篇详细讲解运算符重载的文章,贴在这里分享和收藏. C++中预定义的运算符的操作对象只能是基本数据类型,实际上,对于很多用户自定义类型,也需要有类似的运算操作.例如: class ...
- Yii2 的快速配置 api 服务 yii2-fast-api
yii2-fast-api yii2-fast-api是一个Yii2框架的扩展,用于配置完善Yii2,以实现api的快速开发. 此扩展默认的场景是APP的后端接口开发,因此偏向于实用主义,并未完全采用 ...