关于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 相关文章推荐
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 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中的日期及时间
2006/11/23 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
PHP分页类集锦
2014/11/18 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
执行iframe中的javascript方法
2008/10/07 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
Python函数嵌套实例
2014/09/23 Python
Python实现CET查分的方法
2015/03/10 Python
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
python executemany的使用及注意事项
2017/03/13 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
python与js主要区别点总结
2020/09/13 Python
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
苹果台湾官网:Apple台湾
2019/01/05 全球购物
面向对象概念面试题(.NET)
2016/11/04 面试题
《最后的姿势》教学反思
2014/02/27 职场文书
课外科技活动总结
2014/08/27 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
《开国大典》教学反思
2016/02/16 职场文书
golang生成vcf通讯录格式文件详情
2022/03/25 Golang