以前遇到两个相临近的块,高度要一样,但是内容多少又不定时,我都是通过把这两块封装在TD里面实现,但今天在CSDN上面看到有人要通过JS来实现这个,我尝试了一下.
http://topic.csdn.net/u/20080617/18/cfc9201a-613f-432e-a828-3f3808b9553d.html?seed=553780558

用下面的代码实现了.(虽然个人认为这个代码实用性不太强,但在特定的场景也是一种解决方案).从下面的代码可以看出JQuery使用真是十分方便,使用原生的对象我还真不知道如何取出一个元素的高度,我用document.getElementById("rightbar").style.height得到的是auto.

首发于:http://www.xfuse.cn

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>无标题文档 </title>

<SCRIPT LANGUAGE="JavaScript" src="http://code.jquery.com/jquery-latest.js"> </SCRIPT>

<Script>

</script> 
</head>

<body> 
<div>

<div id=main > 
  动态生成的内容，高度不定 <br> 
  动态生成的内容，高度不定 <br> 
  动态生成的内容，高度不定 <br> 
  动态生成的内容，高度不定 <br> 
  动态生成的内容，高度不定 <br> 
  动态生成的内容，高度不定 <br>

</div> 
  <div id=rightbar > 
  右边栏，内容比main少 
  </div> 
</div> 
<script language="javascript"> 
window.onload=function(){

var he= $('#main').height();

$('#rightbar').height(he);

}; 
</script> 
</html>

让两个DIV的高度隐式同步的更多相关文章

  1. 两个div，高度都是100% 用 display:flex; 和 min-height 一边撑高了，另一边自动走 （不加flex不自动撑开）

    两个div,高度都是100% 用 display:flex; 和 min-height 一边撑高了,另一边自动走

  2. 两个div不同高度并排显示

    在HTML中让两个div并排显示,通常情况下有三种实现方式,包括: (1)设置为行内样式,display:inline-block (2)设置float浮动 (3)设置position定位属性为abs ...

  3. SQL Server 隐式转换引发的躺枪死锁-程序员需知

    在SQL Server的应用开发过程(尤其是二次开发)中可能由于开发人员对表的结构不够了解,造成开发过程中使用了不合理的方式造成数据库引擎未按预定执行,以致影响业务.这是非常值得注意的.这次为大家介绍 ...

  4. Scala进阶之路-Scala高级语法之隐式(implicit)详解

    Scala进阶之路-Scala高级语法之隐式(implicit)详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我们调用别人的框架,发现少了一些方法,需要添加,但是让别人为你一 ...

  5. C++隐式转换与显式转换

    普通类型的转换顺序:隐式把char——>int和从short——>double.转换可能会导致数据的丢失. 自定义类型:有两种函数可以进行隐式转换,单参数构造函数 和 隐式类型转换符.   ...

  6. SQL Server 隐式转换引发的死锁

    在SQL Server的应用开发过程(尤其是二次开发)中可能由于开发人员对表的结构不够了解,造成开发过程中使用了不合理的方式造成数据库引擎未按预定执行,以致影响业务.这是非常值得注意的.这次为大家介绍 ...

  7. scala成长之路（3）隐式转换

    不废话,先上例子:定义一个参数类型为String的函数: scala> def sayHello(name:String) = println("hello " + name ...

  8. MySQL系列：隐式类型转化可能带来的坑

    在开发规范中,我们往往会要求研发避免在where条件中出现隐式类型转换,这么要求大概有以下两方面的原因: 隐式类型转换可能导致索引失效: 隐式类型转换可能产生非预期的结果. 注:这里说的是隐式类型转换 ...

  9. ORACLE隐式类型转换

      隐式类型转换简介   通常ORACLE数据库存在显式类型转换(Explicit Datatype Conversion)和隐式类型转换(Implicit Datatype Conversion)两 ...

随机推荐

  1. 微信小程序official-account组件开发

    今天微信公众平台发了一条消息 扫码打开小程序新增公众号关注组件 官方apihttps://developers.weixin.qq.com/miniprogram/dev/component/offi ...

  2. shell date time

    In Bash: get year-month-day from date DATE=`date +%Y-%m-%d`get year-month-day hour:minute:second fro ...

  3. NetCore+Dapper WebApi架构搭建（三）：添加实体和仓储

    上一节讲了类库添加一些底层的基本封装,下面来添加实体和仓储 1.Entities文件夹添加一个实体类Users,继承BaseModel,即拥有BaseModel的主键 using System; na ...

  4. C#中的特性 (Attribute) 入门 (二)

    C#中的特性 (Attribute) 入门 (二) 接下来我们要自己定义我们自己的特性,通过我们自己定义的特性来描述我们的代码. 自定义特性 所有的自定义特性都应该继承或者间接的继承自Attribut ...

  5. 第一个ASP.NET MVC应用程序

    首先打开vs2015 文件->新建->项目 选择模版选empty,下面[为下项添加文件夹和核心引用]勾选mvc 点击确定就好

  6. luoguP3235 [HNOI2014]江南乐 数论分块 + 博弈论

    感觉其实很水? 题目就是一个Multi SG游戏,只需要预处理出所有的\(sg\)值即可\(O(Tn)\)计算 对于计算\(sg[n]\)而言,显然我们可以枚举划分了\(x\)堆来查看后继状态 那么, ...

  7. 【POJ】2796：Feel Good【单调栈】

    Feel Good Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 18449   Accepted: 5125 Case T ...

  8. JavaScript将具有父子关系的原始数据格式化成树形结构数据(id,pid)

    前几天遇到一个树型组件(类似树形菜单)数据格式化的问题,由于后台把原始查询的数据直接返回给前端,父子关系并未构建,因此需要前端JS来完成,后台返回的数据和下面的测试数据相似. var data=[ { ...

  9. php安装配置

    Content 0.序 1.安装前准备 2.安装PHP 3.配置php-fpm 0.序 本文主要是记录php在 Centos下的安装配置 .文中如无特别说明.表示php-5.6.31代码目录. 1.安 ...

  10. SmartProg2 Universal, ISP capable programmer

    http://www.elnec.com/products/universal-programmers/smartprog2/ 40 powerful TTL pindrivers provide H ...