关于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 相关文章推荐
js以对象为索引的关联数组
Jul 04 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
js数组Array sort方法使用深入分析
Feb 21 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 Javascript
详解JavaScript中的this指向问题
Feb 05 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得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
浅谈php冒泡排序
2014/12/30 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
写了个监控nginx进程的Python脚本
2012/05/10 Python
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
Python实现字符串格式化输出的方法详解
2017/09/20 Python
PyCharm代码格式调整方法
2018/05/23 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
Python气泡提示与标签的实现
2020/04/01 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
优秀少先队工作者事迹材料
2014/05/13 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
经验交流材料格式
2014/12/30 职场文书
追悼会答谢词
2015/01/05 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
八年级英语教学反思
2016/02/15 职场文书
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python