以前遇到两个相临近的块,高度要一样,但是内容多少又不定时,我都是通过把这两块封装在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. 迭代器模式 与 C# IEnumerator/IEnumerable

    Part1 迭代器模式 与 接口 IEnumerable IEnumerator interface IEnumerable { IEnumerator GetEnumerator(); } // 泛 ...

  2. html+css制作五环（代码极简）

    五环 把五环做成一个浮动,总是位于屏幕中央的效果. 难点 定位的练习 position :fixed 位于body中间的时候 left:50%:top:50%; css内部样式表的使用 style=& ...

  3. 有了这套flex页面布局方案，页面什么的，那都不是事。

    一.CSS3弹性盒子弹性盒子是CSS3的一种新布局模式.CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局 ...

  4. SpringMVC源码解读 - HandlerMapping - RequestMappingHandlerMapping初始化

    RequestMappingHandlerMapping ,用于注解@Controller,@RequestMapping来定义controller. @Controller @RequestMapp ...

  5. iOS 11开发教程（八）定制iOS11应用程序图标

    iOS 11开发教程(八)定制iOS11应用程序图标 在图1.9中可以看到应用程序的图标是网状白色图像,它是iOS模拟器上的应用程序默认的图标.这个图标是可以进行改变的.以下就来实现在iOS模拟器上将 ...

  6. Django快速创建博客，包含了整个框架使用过程，简单易懂

    创建工程                                                                                                 ...

  7. bzoj4668: 冷战 并查集按秩合并

    题目链接 bzoj4668: 冷战 题解 按秩合并并查集,每次增长都是小集合倍数的两倍以上,层数不超过logn 查询路径最大值 LCT同解 代码 #include<bits/stdc++.h&g ...

  8. [BZOJ4571][SCOI2016]美味(贪心+主席树)

    经典问题,按位贪心,每次需要知道的是”在这一位之前的位都以确定的情况下,能否找到这一位是0/1的数”,这就是在询问[L,R]内某个值域区间是否有数,主席树即可. #include<cstdio& ...

  9. 鸟哥的私房菜：Bash shell(三)-命令别名与历史指令

    一  命令别名设定: alias, unalias 命令别名是一个很有趣的东西,特别是你的惯用指令特别长的时候!还有, 增设预设的属性在一些惯用的指令上面,可以预防一些不小心误杀档案的情况发生的时候! ...

  10. 读书笔记_Effective_C++_条款三十七：绝不重新定义继承而来的缺省参数值

    先看下面的例子: enum MyColor { RED, GREEN, BLUE, }; class Shape { public: ; }; class Rectangle: public Shap ...