在开发的工程中使用到了一些开源的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. MySQL审计工具Audit Plugin安装使用

    本实验的审计插件均是安装在 mysql-community-server-5.7.9 的服务器上. 插件安装(社区版) 插件下载地址: https://bintray.com/mcafee/mysql ...

  2. Python序列化模块pickle和json使用和区别

    这是用于序列化的两个模块: • json: 用于字符串和python数据类型间进行转换 • pickle: 用于python特有的类型和python的数据类型间进行转换 Json模块提供了四个功能:d ...

  3. Java:创建线程

    Java定义了两种创建线程的方法: 1.实现Runnable接口 要实现Runnable接口,只需简单地实现run()方法即可,声明如下:public void run() 在run()方法中,可以定 ...

  4. Python爬虫之设置selenium webdriver等待

    Python爬虫之设置selenium webdriver等待 ajax技术出现使异步加载方式呈现数据的网站越来越多,当浏览器在加载页面时,页面上的元素可能并不是同时被加载完成,这给定位元素的定位增加 ...

  5. php:php相关的函数或用法记录

    //1:判断字符串是否全是字母组成的 $str = 'AAKAaa_aLJIGF'; var_dump(ctype_alpha($str)); //boolean false,全部是英文时才是返回tr ...

  6. 常见的HTTP状态码说明

    1.说明 HTTP服务器状态代码定义(Status Code Definitions) 做测试的时候,会产生比较多的HTTP错误,查看其错误,有超时的,链接不到图片的,连接不到服务器等等,很多人经常忘 ...

  7. 什么是微服务架构,.netCore微服务选型

    什么是微服务架构,.netCore微服务选型 https://www.cnblogs.com/uglyman/p/9182485.html 开发工具:VS2017 .Net Core 2.1 什么是微 ...

  8. Storm概念学习系列之并行度与如何提高storm的并行度

    不多说,直接上干货! 对于storm来说,并行度的概念非常重要!大家一定要好好理解和消化. storm的并行度,可以简单的理解为多线程. 如何提高storm的并行度? storm程序主要由spout和 ...

  9. windows 用VMware创建linux虚拟机,安装操作系统CentOS7.2

    1.按照向导创建虚拟机 以下是安装虚拟机的步骤,没有写的直接下一步 [1]主页-创建新虚拟机 [2]选择 自定义(高级) [3]选择稍后安装操作系统 [4]给虚拟机命名并指定所在位置 [5]给处理器配 ...

  10. JS类对象实现继续的几种方式

    0. ES6可以直接使用class,extends来继承. 1.  原型继承 父类: function Persion(name,age){ this.name = name; this.age = ...