在开发的工程中使用到了一些开源的bootstrap模板进行开发,在遇到一些需要替换的内容部分部分时,经常出现高度设置100%无法生效的问题,这里来用js强行设置一下。

  思路:js监听窗口的缩放行为,然后动态获取浏览器的窗口可见大小,然后如果你的页面有页头页尾的话,掐头去尾,得到的就是内容部分100%时的高度,赋值进去便可。

代码:

  1. window.onload=function(){
  2. changeDivHeight();
  3. }
  4. //当浏览器窗口大小改变时,设置显示内容的高度
  5. window.onresize=function(){
  6. changeDivHeight();
  7. }
  8. function changeDivHeight(){
  9. var h = document.documentElement.clientHeight;//获取页面可见高度
  10. document.getElementById("framediv").style.height=h-102+"px";//掐头去尾,减去100px
  11. }

  试试看?!

使用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. 如何备份Chrome浏览器收藏夹

    前言:最近,由于工作需要,要卸载当前Chrome版本,并安装最新版Chrome.卸载前,意识到之前收藏在收藏夹里的很多知识链接还未备份,于是有了今天的话题:如何备份Chrome浏览器的收藏夹? 主题: ...

  2. wampserver2.5局域网公网IP访问配置

    wampserver2.5集成环境的安装和使用就不多说了,网上有很多教材.安装好后找到apache的配置文件httpd.conf.默认位置是: swap安装目录\wamp\bin\apache\apa ...

  3. centos6上安装CDH5.7

    目录 一.环境说明及所需软件包... 1 1.环境说明... 1 2.所需软件及说明... 1 二.安装前的主机准备(所有主机都有做) 2 1.配置主机名和修改host文件... 2 2.下载系统基本 ...

  4. EXP-00000: Message 0 not found; No message file for product=RDBMS, facility=EXP问题的解决方案

    EXP-00000: Message 0 not found; No message file for product=RDBMS, facility=EXP 最近在服务器上准备做一个批处理,定时备份 ...

  5. Unity 关于时间

    一.引言 本篇博客 包括:unity中帧的耗时,时间缩放比例,常用日期时间的获取和计算,测试一段程序的耗时. 二.帧时间 名称 描述 Time.time (只读)表示从游戏开发到现在的时间,会随着游戏 ...

  6. Djano调试工具debug-toolbar

    Djano调试工具debug-toolbar   django-debug-toolbar 调试工具使用文档 安装 pip install django-debug-toolbar 配置 在setti ...

  7. BZOJ 1047: [HAOI2007]理想的正方形 单调队列瞎搞

    题意很简明吧? 枚举的矩形下边界和右端点即右下角,来确定矩形位置: 每一个纵列开一个单调队列,记录从 i-n+1 行到 i 行每列的最大值和最小值,矩形下边界向下推移的时候维护一下: 然后在记录的每一 ...

  8. RabbitMQ使用教程(二)RabbitMQ用户管理,角色管理及权限设置

    上一篇博客 RabbitMQ使用教程(一)RabbitMQ环境安装配置及Hello World示例 中,我们成功的安装好了RabbitMQ环境,并通过一个Java客户端示例了解了用生产者来发布消息,用 ...

  9. MYSQL查询~ 存在一个表而不在另一个表中的数据

    A.B两表,找出ID字段中,存在A表,但是不存在B表的数据.A表总共13w数据,去重后大约3W条数据,B表有2W条数据,且B表的ID字段有索引. 方法一 使用 not in ,容易理解,效率低  ~执 ...

  10. 洛谷CF784E Twisted Circuit

    (本题本来可能也就普及难度但是硬生生给评成了一道NOI难度的紫题,有点无语...) 这道题目是一道愚人节题目,本来只有下面的电路图,结果翻译完之后难度就直接没了. ------------ 言归正传, ...