有左右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. HDU 5781 ATM Mechine

    题目大意:某个未知整数x等概率的分布在[0,k]中.每次你都可以从这个整数中减去一个任意整数y,如果x>=y,那么x=x-y,操作次数累计加1:否则,将会受到一次错误提示.当错误提示超过w次,将 ...

  2. 总结一下.net framework适合装在哪些系统中

    最近在客户这部署,环境是windows server2003 service pack2.因为vs2012开发环境是.net framework4.5,所以发布iis的时候,尝试在sever2003上 ...

  3. 06JS高级创建对象使用原型共享对象方法

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. UITabBarItem

    – finishedSelectedImage 返回选中时的图表 – finishedUnselectedImage 返回为选中时的图表 – setFinishedSelectedImage:with ...

  5. @property属性

    1. 读写属性(readwrite/ readonly) 默认为readwrite,表示该属性既可以读取,也可以给该属性变量赋值:readonly则表示只能读取该属性变量. 2. 原子属性 (atom ...

  6. OC——封装(初级与高级)

    所谓的封装,就是通过定义方法或者函数去操作成员属性或者成员变量,而不是直接通过指针方式去操作.借此达到提高代码安全性,代码可行性以及代码执行效率的目的. 1:初级封装,对成员变量进行封装. #impo ...

  7. VS2013关于“当前不会命中断点源代码与原始版本不同”的BUG

    文件明明没有动过,竟然一直给我这种提示! 解决方法:将出问题的文件用notepad打开,然后另存为Unicode编码,覆盖原来的文件. 网上另外有一种办法是:通过重新格式化出问题的源文件亦可以解决,即 ...

  8. ASP.Net引用类库出现问题 二

    一:引用mysql.data.dll出现,问题? error: Package MySql.Data (.NETCoreApp,Version=v1.). Package MySql.Data sup ...

  9. C++箴言:理解 new-handler的行为

    当 operator new 不能满足一个内存分配请求时,它抛出一个 exception(异常).很久以前,他返回一个 null pointer(空指针),而一些比较老的编译器还在这样做.你依然能达到 ...

  10. 【Lucene】挖掘相关搜索词

    搜索引擎中往往有一个可选的搜索词的列表,当搜索结果太少时,可以帮助用户扩展搜索内容,或者搜索结果太多的时候可以帮助用户深入定向搜索.一种方法是从搜索日志中挖掘字面相似的词作为相关搜索词列表.另一种方法 ...