在开发的工程中使用到了一些开源的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%的更多相关文章

  1. HTML学习之给div高度设置百分比不生效的问题

    这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: < ...

  2. div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

    div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...

  3. JS获取div高度的方法

    有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...

  4. 父元素高度设置为min-height,子元素高度设置为100%,但实际上子元素高度你知道是多少吗?

    前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...

  5. 微信小程序高度设置为100%

    在网页中设置body,html{height:100%}; 将body和html设置为100%,这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦. 但是在微 ...

  6. js改变div高度

    用bootsrap响应式布局的时候,遇到个很恶心的问题:左边栏很短很难看!! 于是,想用js来自动改变左边的高度,没成功!!原来是设置的时候,没加单位,坑爹了. 参考:http://blog.sina ...

  7. DIV高度设置全屏

    <div class="full"></div> .full{ height:100%; position:fixed; } 使用position的fixe ...

  8. js为DIV动态设置id属性

    <script> var objs=document.getElementById("iproduct").getElementsByTagName("div ...

  9. DIV宽度设置成100%,浏览器窗口缩小后,右边出现留白

    解决办法:给body添加min-width属性

随机推荐

  1. day5字典作业详解

    1.day5题目 1.有如下变量(tu是个元祖),请实现要求的功能 tu = ("alex", [11, 22, {"k1": 'v1', "k2&q ...

  2. ERROR 1366 (HY000): Incorrect string value: '\xB3\xA4\xC9\xB3' for column

    在用以下方法之前,请先执行下面命令查看. show variables like 'character%';  ——查看所有编码方式 show create table table_name;   — ...

  3. 16.创建与操纵表--SQL

    一.新建表 利用CREA TE TA BLE创建表,必须给出下列信息: 新表的名字,在关键字CREA TE TA BLE之后给出: 表列的名字和定义,用逗号分隔: 有的DBMS还要求指定表的位置. C ...

  4. BZOJ 1977: [BeiJing2010组队]次小生成树 Tree 倍增 最小生成树

    好吧我太菜了又调了一晚上...QAQ 先跑出最小生成树,标记树边,再用树上倍增的思路,预处理出: f[u][i] :距离u为2^i的祖先 h[u][i][0/1] :距u点在2^i范围内的最长边和次长 ...

  5. HttpServletRequest 和 HttpServletResponse

    Servlet配置方式 全路径匹配 以 / 开始 /a /aa/bb localhost:8080/项目名称/aa/bb 路径匹配 , 前半段匹配 以 / 开始 , 但是以 * 结束 /a/* /* ...

  6. js window对象属相和方法相关整理资料

    window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval mov ...

  7. Linux下无法挂载U盘

    大概的错误信息是这样的: Error mounting /dev/sdb4 at /media/xxx/xx: Command-line`mount -t "ntfs" -o&qu ...

  8. nginx错误Upstream timed out

    Upstream timed out (110: Connection timed out) while reading response header from upstream 这种情况主要在下面 ...

  9. spark RPC详解

    前段时间看spark,看着迷迷糊糊的.最近终于有点头绪,先梳理了一下spark rpc相关的东西,先记录下来. 1,概述 个人认为,如果把分布式系统(HDFS, HBASE,SPARK等)比作一个人, ...

  10. 渣渣菜鸡的 ElasticSearch 源码解析 —— 环境搭建

    关注我 转载请务必注明原创地址为:http://www.54tianzhisheng.cn/2018/08/25/es-code01/ 软件环境 1.Intellij Idea:2018.2版本 2. ...