关于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 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
理解javascript模块化
Mar 28 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
vue增删改查的简单操作
Jul 15 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 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
延长phpmyadmin登录时间的方法
2011/02/06 PHP
php实现源代码加密的方法
2015/07/11 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
python中 logging的使用详解
2017/10/25 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
Gap英国官网:Gap UK
2018/07/18 全球购物
一份报关员的职业规划范文
2014/01/08 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
国际贸易实训报告
2014/11/05 职场文书
2014年绿化工作总结
2014/12/09 职场文书
副总经理岗位职责
2015/02/02 职场文书
爱晚亭导游词
2015/02/09 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
团拜会主持词
2015/07/04 职场文书
Window server中安装Redis的超详细教程
2021/11/17 Redis