关于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 append() html时的小问题的解决方法
Dec 16 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 Javascript
javascript文本模板用法实例
Jul 31 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
vue设置一开始进入的页面教程
Oct 28 Javascript
微信小程序实现单个或多个倒计时功能
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生成WAP页面
2006/10/09 PHP
php实现可运算的验证码
2015/11/10 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
python数据结构之图的实现方法
2015/07/08 Python
Python常用的爬虫技巧总结
2016/03/28 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
Python日期时间Time模块实例详解
2019/04/15 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
python yield和Generator函数用法详解
2020/02/10 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
学生干部学习的自我评价
2014/02/18 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL
Vue深入理解插槽slot的使用
2022/08/05 Vue.js