关于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 相关文章推荐
jQuery与其它库冲突的解决方法
Jun 25 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
微信小程序定义和调用全局变量globalData的实现
Nov 01 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实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
Python遍历目录的4种方法实例介绍
2015/04/13 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
浅谈Python 函数式编程
2020/06/20 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
Hotels.com越南:酒店预订
2019/10/29 全球购物
化妆师职业生涯规划书
2014/02/16 职场文书
销售总经理岗位职责
2014/03/15 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
预备党员半年考察意见
2015/06/01 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers