使用js将div高度设置为100%
在开发的工程中使用到了一些开源的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%的更多相关文章
- HTML学习之给div高度设置百分比不生效的问题
这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: < ...
- div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...
- JS获取div高度的方法
有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...
- 父元素高度设置为min-height,子元素高度设置为100%,但实际上子元素高度你知道是多少吗?
前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...
- 微信小程序高度设置为100%
在网页中设置body,html{height:100%}; 将body和html设置为100%,这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦. 但是在微 ...
- js改变div高度
用bootsrap响应式布局的时候,遇到个很恶心的问题:左边栏很短很难看!! 于是,想用js来自动改变左边的高度,没成功!!原来是设置的时候,没加单位,坑爹了. 参考:http://blog.sina ...
- DIV高度设置全屏
<div class="full"></div> .full{ height:100%; position:fixed; } 使用position的fixe ...
- js为DIV动态设置id属性
<script> var objs=document.getElementById("iproduct").getElementsByTagName("div ...
- DIV宽度设置成100%,浏览器窗口缩小后,右边出现留白
解决办法:给body添加min-width属性
随机推荐
- maven分层架构搭建
1.准备工作: 1.创建数据源 CREATE TABLE `users` ( `id` int(10) NOT NULL AUTO_INCREMENT, `name` varchar(20) DEFA ...
- JSP 不同版本(转)
转自 http://blog.csdn.net/sunnyyoona/article/details/51076823
- Charles使用小结
charles,抓包神器,记录几个测试过程中常用的功能 连接同一局域网的开发机 域名跳转MapRemoteSetting 抓取Https接口 1.下载3.10以上破解版,按如下步骤安装 ...
- this真题编译
1 x y z分别输出的是什么? var x=1, y=z=0; function add(n){ return n= n+1; }; y=add(x); function add(n){ retu ...
- Python web前端 11 form 和 ajax
Python web前端 11 form 和 ajax 一.打开服务器 将handlers.py.httpd.py和libs.py三个文件放入新文件夹中,双击打开httpd.py文件即可 二.ajax ...
- M-HJ浇花
题目描述: 链接:https://ac.nowcoder.com/acm/contest/322/M来源:牛客网 HJ养了很多花(99999999999999999999999999999999999 ...
- api接口测试工具和接口文档管理工具
api接口测试工具和接口文档管理工具 1.postman(https://www.getpostman.com) Postman 是一个很强大的 API调试.Http请求的工具.她可是允许用户发送任何 ...
- D - Simple String CSU - 1550
http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1550 很久都没补这题,最近想学网络流,就看看,队友以前用网络流过的,Orz, 但是这题只需要简 ...
- Android Bitmap(位图)详解
一.背景 在Android开发中,任何一个APP都离不开图片的加载和显示问题.这里的图片来源分为三种:项目图片资源文件(一般为res/drawable目录下的图片文件).手机本地图片文件.网络图片资源 ...
- opencv作业
作业下载地址: 链接:http://pan.baidu.com/s/1qYQnbkw 密码:v7y9