关于div自适应高度/左右高度自适应一致的js代码


Posted in Javascript onMarch 22, 2013

在使用DIV和CSS进行网页布局中,DIV的自适应高度和自适应宽度是一个很常见的问题。
为了保证页面的整体美观性,需要将两个或者多个层的高度/宽度保持一致。

左右自适应高度一致 Jquery

<div style="width:300px;"> 
<div id="Left" style="float:left;background-color:blue;">1<br/>3<br/>5<br/></div> 
<div id="Right" style="float:right;background-color:red;">2</div> 
</div> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
<script type="text/javascript"> 
$(function(){ 
var heightLeft= $("#Left").height(); 
var heightRight= $("#Right").height(); 
if (heightLeft > heightRight) 
{ 
$("#Right").height(heightLeft); 
} 
else 
{ 
$("#Left").height(heightRight); 
} 
}) 
</script>

DIV高度自适应屏幕 js
<div id="top" style="height="200px;"></div> 
<div id="box">dsafsafsafsafsafdsa</div> 
<script> 
window.onload=function (){ 
function auto_height() 
{ 
//var h= document.documentElement.clientHeight-200; 
//var high = document.getElementById("box"); 
//high.style.height=h+"px"; 
document.getElementById("box").style.height=document.documentElement.clientHeight-200+"px"; 
} 
auto_height(); 
onresize=auto_height; 
} 
</script>
Javascript 相关文章推荐
javascript 获取网页参数系统
Jul 19 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
javascript 回调函数详解
Nov 11 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
require.js中的define函数详解
Jul 10 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
JavaScript实现拖拽效果
Mar 16 Javascript
基于JavaScript实现简单的轮播图
Mar 03 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 #Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 #Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 #Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 #Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 #Javascript
jquery文字上下滚动的实现方法
Mar 22 #Javascript
JS模块与命名空间的介绍
Mar 22 #Javascript
You might like
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
node中间层实现文件上传功能
2018/06/11 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
详解Python的Django框架中的templates设置
2015/05/11 Python
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
数字漫画:comiXology
2020/06/13 全球购物
办理退休介绍信
2014/01/09 职场文书
大学活动邀请函
2014/01/28 职场文书
校园文化建设方案
2014/02/03 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
平安工地汇报材料
2014/08/19 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
教学质量月活动总结
2015/05/11 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python
Docker官方工具docker-registry案例演示
2022/04/13 Servers
nginx配置指令之server_name的具体使用
2022/08/14 Servers