关于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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 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 cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
PHP 断点续传实例详解
2017/11/11 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
js简单抽奖代码
2015/01/16 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
Python读写Excel文件的实例
2013/11/01 Python
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
Python pickle模块用法实例分析
2015/05/27 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
如何教少儿学习Python编程
2020/07/10 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
女方婚礼新郎答谢词
2014/01/11 职场文书
小学生演讲稿大全
2014/04/25 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
找规律教学反思
2016/02/23 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL