在开发的工程中使用到了一些开源的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 之 LOAD DATA INFILE 快速导入数据

    SELECT INTO OUTFILE > help select; Name: 'SELECT' Description: Syntax: SELECT [ALL | DISTINCT | D ...

  2. [Xcode 实际操作]六、媒体与动画-(16)实现音乐的背景播放

    目录:[Swift]Xcode实际操作 本文将演示音乐的背景播放功能 打开项目信息配置文件[info.plist]. 需要在配置文件中进行一些操作,使程序支持音乐的背景播放. 点击鼠标右键,弹出右键菜 ...

  3. 记录错误:tomcat“socket close”错误

    Error running 'Tomcat 8.5.37': Unable to open debugger port (127.0.0.1:9562) 使用打开cmd.exe 输入 1)taskli ...

  4. AtCoder Regular Contest 082 ABCD

    A #include<bits/stdc++.h> using namespace std; ]; int n,m; int main(){ cin>>n>>m; ...

  5. 关于MySQL索引的一点小见解

    索引: 优缺点: 1.用的合理可以提高查询效率 2.建立过多索引会占用物理和数据空间,同时也会降低插入和更新效率 需不需要建立索引: 1.一般表的数据低于2000条就不用建立索引了,超过2000条酌情 ...

  6. net core 中间件管道

    net core 中间件管道 .net core 管道(Pipeline)是什么? 由上图可以看出,.net core 管道是请求抵达服务器到响应结果返回的中间的一系列的处理过程,如果我们简化一下成下 ...

  7. ASP.NET Core性能测试

    ASP.NET Core性能测试 应用性能直接影响到托管服务的成本,因此公司在开发应用时需要格外注意应用所使用的Web框架,初创公司尤其如此.此外,糟糕的应用性能也会影响到用户体验,甚至会因此受到相关 ...

  8. 汉柏杯&&政治生日6月5日&&端午节

    (一)汉柏杯 前不久汉柏杯2019年计算机设计大赛由我校承办,参加了软件应用开发组竞赛.开发了一个基于微信公众号的求职招聘系统,虽然很low但是貌似还是进了国赛,大概八月十号去安徽芜湖参加国赛决赛.据 ...

  9. Fedora12下yum安装低版本gcc

    1.Fedora12下gcc位置及其版本如下: 2.根据需要,要安装低版本的gcc,直接用"yum install gcc"安装时默认是安装最新版本的gcc,如下: 3.可先通过& ...

  10. git忽略已经被提交的文件

    git忽略已经被提交的文件 git rm --cached logs/xx.log 然后更新 .gitignore 忽略掉目标文件, 最后 git commit -m "We really ...