在开发的工程中使用到了一些开源的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. ajax异步传输数据,return返回值为空

    今天在项目中遇到了一个问题,就是在定义了一个函数drawHtml(),本意是想在函数运行结束后,返回拼接的字符串,可是函数运行结束后始终返回的是undefined 有BIG的代码: function ...

  2. spring框架_AOP和注解

    1.什么是AOP :全称是Aspect Oriented Programming即:面向切面编程. 简单来说它就是把我们程序重复的代码抽取出来,在需要执行的时候,使用动态代理的技术,在不修改源码的基础 ...

  3. python 定位

    #字符串定位 使用str.find() 其结果为如下: #列表中元素的定位 使用list.index() 其结果如下:

  4. EOS Bios Boot Sequence

    EOS version:v1.0.5 Date:2018-06-19 Host: Centos 7 Reference :https://github.com/EOSIO/eos/wiki/Tutor ...

  5. java.sql.SQLException: Could not commit with auto-commit set on

    This kind of exceptions occur when the Oracle JDBC Driver (ojdbc6.jar) version 12 or above will be u ...

  6. kettle的使用(ETL,数据仓库技术)

    本周项目上用到了kettle并且需要做任务调度,听老师说用kettle自带的调度不大稳定于是便baidu了下,参照这篇文章完成了通过kitchen的调度,简单说就是通过windows的计划任务来调用. ...

  7. 单例设计模式singleton

    简单引入 单例设计模式作为最简单,最常用的设计模式.一般是这两中写法,这两种写法教科书所谓的标准写法,但是实际上存在不少问题.后面介绍标准写法,以规避这些问题. 1.懒汉式: /** * 问题在于,当 ...

  8. input 内容发生改变时触发事件

    oninput,onpropertychange,onchange的用法 onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失 ...

  9. MySQL数据库 (5)

    --视图,触发器,函数,存储过程,事务,索引

  10. css中如何设置透明度

    怎样在CSS样式中设置背景的透明度,下面一个具体的实例.把类为box的层设为透明.<div class="box"></div><style>. ...