关于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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
layui表格实现代码
May 20 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
js实现提交前对列表数据的增删改查
Jan 16 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/06/05 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
php利用header函数下载各种文件
2016/08/24 PHP
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
详解Python中的文本处理
2015/04/11 Python
Python变量作用范围实例分析
2015/07/07 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
消防安全宣传口号
2014/06/10 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
2014年内勤工作总结
2014/11/24 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
python 中的@运算符使用
2021/05/26 Python
AJAX实现省市县三级联动效果
2021/10/16 Javascript
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript