关于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 相关文章推荐
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
javascript实现2016新年版日历
Jan 25 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 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 set_time_limit(0)长连接的实现分析
2010/03/02 PHP
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
基于PHP编程注意事项的小结
2013/04/27 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
python实现自动重启本程序的方法
2015/07/09 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
Python 修改列表中的元素方法
2018/06/26 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
keras 多gpu并行运行案例
2020/06/10 Python
python ssh 执行shell命令的示例
2020/09/29 Python
一些Solaris面试题
2013/03/22 面试题
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
校园活动策划书范文
2014/01/10 职场文书
人事助理自荐信
2014/02/02 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
Elasticsearch 配置详解
2022/04/19 Java/Android