有左右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. setinterval

    setInterval(function(){document.getElementsByTagName("li")[0].click()},1000);

  2. 解决aapt命令在Linux下无法运行的问题

    新的一个项目,需要在Linux下执行aapt命令对apk文件进行处理 开发环境: MacBook-Pro:appSecuity zhang$ uname -a Darwin huijundeMacBo ...

  3. C#6 冒泡 折半查找 二维数组

    人类思维--计算机逻辑思维 逻辑思维--代码实现 写书法: 描红--临摹--碑贴--自成一体--草 章节复习: 数组:一维,二维,多维 一维:豆角.连续,同一类型. 定义:数据类型[] 数组名=new ...

  4. WebApp 里Meta标签大全

    1.先说说mate标签里的viewport: viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏.状态栏.滚动条等等之后用于看网页的区域.对于传统WEB页面来说,9 ...

  5. sqlmap的详细使用

    各项参数讲的太仔细了,对于只会几个参数的我来说,太受用了. 先mark下 http://drops.wooyun.org/tips/143 http://drops.wooyun.org/tips/4 ...

  6. Oracle EBS-SQL (INV-5):检查期间拉式物料领用记录数.sql

    select         FU.description                                  操作者,         KK.DESCRIPTION           ...

  7. Web模板

    http://www.iteye.com/news/26229 http://designmodo.com/admin-html-website-templates/#ixzz1mj36E4kN ht ...

  8. PSAM SAM

    第一个问题: 为什么要用SAM? 究竟谁最开始使用SAM这个词,已经无从考证,能够确认的是:这个世界上先有了PSAM,然后才有了SAM.由于网络状况的原因,或者是应用环境的要求,使用IC卡作为支付介质 ...

  9. delphi 实现微信开发

    大体思路: 1.用户向服务号发消息,(这里可以是个菜单项,也可以是一个关键词,如:注册会员.) 2.kbmmw web server收到消息,生成一个图文消息给微信,在图文消息中做好自己的url,在u ...

  10. C++多字节字符转换为宽字符的两种方法

    目前知道有两种方式:可以提供宽字符与ANSI字符之间的转换, 第一种由COM库提供的函数 char*  _com_util::ConvertBSTRToString(BSTR ); BSTR _com ...