关于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表单验证插件EasyValidator用法分析
Nov 15 Javascript
JS控制表单提交的方法
Jul 09 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 Javascript
JavaScript中arguments的使用方法详解
Dec 20 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
使用PHP批量生成随机用户名
2008/07/10 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
对联广告js flash激活
2006/10/19 Javascript
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
javascript 面向对象 function类
2010/05/13 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
AngularJs表单验证实例详解
2016/05/30 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
北大自主招生自荐信
2013/10/19 职场文书
二手房购房协议书范本
2014/10/05 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
导游词之长城八达岭
2019/09/24 职场文书
Python3中最常用的5种线程锁实例总结
2021/07/07 Python