关于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限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
字符串反转_JavaScript
Apr 28 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
vue时间格式化实例代码
Jun 13 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
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中global和$GLOBALS[]的分析之一
2012/02/02 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
js a标签点击事件
2017/03/30 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
浅析Python编写函数装饰器
2016/03/18 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
python中类的属性和方法介绍
2018/11/27 Python
python将txt文件读取为字典的示例
2018/12/22 Python
Django的Modelforms用法简介
2019/07/27 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
社团文化节策划书
2014/02/01 职场文书
就业协议书范本
2014/04/11 职场文书
道德演讲稿
2014/05/21 职场文书
争做文明公民倡议书
2014/08/29 职场文书
法务专员岗位职责
2015/02/14 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
Python中异常处理用法
2021/11/27 Python