关于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用户自定义类的类名称的代码
Mar 08 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
JavaScript File分段上传
Mar 10 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
javascript+Canvas实现画板功能
Jun 23 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 闭包特性在实际应用中的问题
2009/10/30 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
漂亮的提示信息(带箭头)
2007/03/21 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
python高阶爬虫实战分析
2018/07/29 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
给男朋友的道歉信
2014/01/12 职场文书
大学生实习证明范本
2014/01/15 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
本科毕业生自荐信
2014/06/02 职场文书
毕业生实习证明
2014/09/19 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android