在开发的工程中使用到了一些开源的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. IT兄弟连 Java语法教程 Java语言的其他特性

    Java语言中除了非常重要的跨平台特性外,还有如下几个关键特性: ●  语法简单易学 Java语言的语法简单明了,容易掌握,而且是纯面向对象(OOP)的语言,Java语言的简单性主要体现在以下几个方面 ...

  2. java之代理 静态代理和动态代理

    一.静态代理     1. 代理有很多种,有虚拟代理,保护代理,智能引用代理,和远程代理; 开发中最常用的是只能引用代理       2. 代理的模式有两种,分别是: 静态代理 代理对象,被代理对象在 ...

  3. echart 初级尝试

    var option = { title: { text: 'ECharts 入门示例'//标题 }, legend: { data:['销量']//图例 }, xAxis: { data: [&qu ...

  4. 解决git从remote clone后所有文件都改变的问题

    遇到2次这种情况了,git从remote clone项目代码后发现所有文件都要改变,因为权限改变了,可以通过git来设置忽略权限变化 git config --global core.fileMode ...

  5. Java使用comms-net jar包完成ftp文件上传进度的检测功能

    本文章只讲述大致的思路与本次功能对应的一些开发环境,具体实现请结合自己的开发情况,仅供参考,如果有不对的地方,欢迎大家指出! 准备环境:JDK1.7 OR 1.8.eclipse.ftp服务器(可自行 ...

  6. centOS6.5 安装后无法启动无线上网

    查看无线网卡型号:[root@mookee rtl8192se_linux_2.6.0019.1207.2010]# lspci |grep Network03:00.0 Network contro ...

  7. 持续集成~Jenkins构建GitHub项目的实现

    有了前两讲的基础,这回我们就可以把github上的项目做到CI(jenkins)里了,让它自动去集成部署,持续集成~Jenkins里的NuGet和MSBuild插件,持续集成~Jenkins里的pow ...

  8. 《四 spring源码》手写springioc框架

    手写SpringIOCXML版本 /** * 手写Spring专题 XML方式注入bean * * * */ public class ClassPathXmlApplicationContext { ...

  9. JAVA基础之项目分包

    个人理解: 项目分层分包适合多人开发合作的,最好一个界面设置一个view,同时注释一定设置好,按照顺序:从前向后进行传递参数,从后向前进行传递返回值来进行判断是否真正的执行了sql语句(可以不返回), ...

  10. columns分栏与flex弹性盒模型

    columns  分栏 值:column-width:设置每列的宽度        column-count:设置列数   例:columns{200px 3}   列数和宽度固定        co ...