有左右2个并列的div,2个div都不能限定高度。左div为导航,右div为内容。如何能让左div块自动获得和右div块相等的高度?

同时,也有网友提问到“如果右块高度比左块低,会不会导致左块的内容被溢出不显示之类的问题。应该是取左右2者的最高值吧来对齐吧”。

的确应该是哪个div Height值大,就将其值赋给Height值小的div,从而使2个div高度始终保持一致。


function $(id){
return document.getElementById(id)
}
function getHeight() {
if ($("left").offsetHeight>=$("right").offsetHeight){
$("right").style.height=$("left").offsetHeight + "px";
}
else{
$("left").style.height=$("right").offsetHeight + "px";
}
}
window.onload = function() {
getHeight();
}

经测试,该代码有效。

另外,在实际运用,可能还会存在由于左div或右div存在padding属性而导致上述取值变多或变少的问题。比如,最终赋值时发现left比right还高10px,那么也可以通过修改上述代码解决:

$("left").style.height=$("right").offsetHeight-10 + "px";

http://blog.163.com/sharesun@126/blog/static/5749096200931121250435/让并排的两个Div自适应高度(一样高)

让2个并列的div根据内容自动保持同等高度js的更多相关文章

  1. 如何让2个并列的div根据内容自动保持同等高度

    最近在工作中碰到一个需求: 有左右2个并列的div,2个div都不能限定高度.左div为导航,右div为内容.如何能让左div块自动获得和右div块相等的高度? 同时,也有网友提问到"如果右 ...

  2. 固定高度div,随内容自动变高css定义方法

    *{ font-size:12px; margin:0; padding:0;}方法1:#testBox{border:1px solid #cccccc;padding:5px;width:220p ...

  3. div 文章内容自动分屏显示

    <head runat="server"> <title></title> <script language="javascri ...

  4. 为什么当多个inline-block的div中,如果有的div没有内容而有的div有内容,有内容的会下沉?

    为什么当多个inline-block的div中,如果有的div没有内容而有的div有内容,有内容的会下沉? 就像这样 两个div高度相同,第二个我写了一个1当作 有内容吧,它就下沉了... 奇怪... ...

  5. DIV的内容自动换行

    word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行. 它们的区别就在于: 1,word-break:break-all 例如div宽 ...

  6. CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

    CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...

  7. 05网页<div></div>块内容

    网页<div></div>块内容 <header>此处为新 header 标签的内容</header> <navigation>此处为新 n ...

  8. 下拉列表 通过option 改变div的内容

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. 万能js实现翻页,动态生成内容自动翻页,兼容各种浏览器(已测试)----神器版!

    转--http://www.2cto.com/kf/201402/277535.html 万能js实现翻页,动态生成内容自动翻页,兼容各种浏览器(已测试)----神器版! 2014-02-11     ...

随机推荐

  1. IBM WebSphere MQ的C#工具类以及源码(net)

    简单的介绍一下MQ常用的对象 Queue Manager 队列管理器 主要负责管理队列.通道等,类似与Oracle中的Oracle实例的概念,在一台服务器中可以定义多个Queue Manager. Q ...

  2. HTML——JAVASCRIPT——光棒效果

    光棒效果:建立一个表格,鼠标放到哪一行,哪一行的颜色就改变,鼠标离开那一行,那一行的颜色就恢复到原来的颜色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  3. C#l连接OPC进行数据交互

    步骤 :引用 OPCNETAPI.DLL&&OPCNETAPI.COM.DLL 1.查询服务器      2. 连接服务器  3. 读取数据     4.写入数据 1.查询服务器 :根 ...

  4. 安装ConEmu

    ConEmu可以提供比Windows自带控制台(cmd.exe)程序更多的功能,从其官网下载安装程序时选择预览版安装包(Preview, Installer)即可.

  5. 从头开发MUDLIB

    跟Akuma一起从头打造mudlib--[第一讲] 第一讲:让它跑起来注:每一讲我都会上传一个相符的lib,有些文件是旧的,有些是新的,我尽可能在lib里写清楚注释.更详细的内容则在每讲的正文里写. ...

  6. 最长增长子序列 DP

    #include<iostream> using namespace std; #define INF 0x7fffffff #define N 10000 // O(n^2) int l ...

  7. CSS自学笔记(12):CSS3文字特效

    在CSS3中新增了多个文本属性,同样有了这些属性我们在进行问题特效处理时,就尽可能少的用到其他软件去制作特效文字了. 在以前使用CSS进行web开发的时候,必须使用计算机上安装好的字体,如果有些用户的 ...

  8. Linux进程间通信——使用消息队列

    下面来说说如何用不用消息队列来进行进程间的通信,消息队列与命名管道有很多相似之处.有关命名管道的更多内容可以参阅我的另一篇文章:Linux进程间通信——使用命名管道   一.什么是消息队列 消息队列提 ...

  9. Codeforces 734F Anton and School(位运算)

    [题目链接] http://codeforces.com/problemset/problem/734/F [题目大意] 给出数列b和数列c,求数列a,如果不存在则输出-1 [题解] 我们发现: bi ...

  10. 黑马程序员_static\访问权限\单例模式 大汇总

    一.static关键字 1.用法 Static是一个修饰符,用于修饰成员,包括成员变量和成员函数.当成员被静态修饰后,就多了一种调用方式,除了可以被对象调用外,还可以直接被类名调用.System.ou ...