让2个并列的div根据内容自动保持同等高度js

有左右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/[email protected]/blog/static/5749096200931121250435/让并排的两个Div自适应高度(一样高)
时间: 2024-10-03 18:08:46

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

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

最近在工作中碰到一个需求: 有左右2个并列的div,2个div都不能限定高度.左div为导航,右div为内容.如何能让左div块自动获得和右div块相等的高度?刚进公司好一段纠结那个时候技术好垃圾的路过(现在也很垃圾) 请看代码 function $(id){ return document.getElementById(id) } function getHeight() { if ($("left").offsetHeight>=$("right").of

文本内容自动回滚 【js读书笔记】

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文本内容自动回滚</title> 6 </head> 7 8 <body> 9 <h2>文本框中的文字自动回滚效果</h2> 10 <div id="rollContent" data-rwidth=&q

DIV的内容自动换行

word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行. 它们的区别就在于: 1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了. 2,word-wrap:break

div没有内容的时候依然保持占位,不会被覆盖

div分为左中右浮动,当左边没有内容,只有宽度高度自适应的情况下,左边的位置就会被中间的内容占据,如下图: 为了让空的div也占位,可以添加一个最小的高度min-height 1px即可,也可以设置border:true;这样就可以保证div一直占位 原文地址:https://www.cnblogs.com/my466879168/p/12258357.html

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

转--http://www.2cto.com/kf/201402/277535.html 万能js实现翻页,动态生成内容自动翻页,兼容各种浏览器(已测试)----神器版! 2014-02-11      0个评论    来源:卡布洛技术专栏   收藏    我要投稿 要求:动态输入内容,点击post生成内容条,实现自动翻页! 废话不多说,直接上代码: js代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

用python+selenium将腾讯首页今日话题的内容自动发表到自己cnblog里

目的:使用pyhton下的unittest单元测试框架并结合selenium的webdriver来实现将腾讯首页的今日话题下的内容自动发表达到自己的cnblog里. 创建QQDailyTopic类继承unittest的TestCase类,setUp()方法用于测试执行前的初始化工作,而最后的tearDown()与setUp()方法相呼应,用于测试执行之后的善后工作.python 3.x 和 selenium 2实现代码如下: 1 #coding=utf-8 2 from selenium imp

怎么样取消提示: 作者被禁止或删除 内容自动屏蔽

今天dizcuz论坛突然出现"提示: 作者被禁止或删除 内容自动屏蔽,只有管理员或有管理权限的成员可见" 我的数据库也没备份,吓死我了.不过很快就找到了方法. 怎么样取消提示: 作者被禁止或删除 内容自动屏蔽,布布扣,bubuko.com

DataGridView单元格内容自动匹配下拉显示

页面显示数据使用的控件是ComponentFactory.Krypton.Toolkit中的KryptonDataGridView控件.在指定“商品”单元格中需要根据用户输入内容自动匹配数据库中商品信息,并且单元格处于编辑模式时显示一个查询图标的按钮,点击该按钮也将显示数据库中所有商品信息. KryptonDataGridView显示控件此处命名为kDGVIndentDetail; 用于下拉显示匹配内容的DataGridView命名为dgv; 1.建立一个DataGridView类型的页面变量用

商品详情页面特殊制作,获取网页的高度,collectionView根据内容的变化其高度也随着变化

商品详情页面特殊制作,获取网页的高度,collectionView根据内容的变化其高度也随着变化,首先先看下效果图: 然后我来介绍一下这个界面的总体架构,整个页面上放置一个tableView,下面的网页是tableView的footerview,中间规格所在的区域是一个cell上放置一个collectionView, 问题点1:商品规格可能有很多种,比如颜色.重量.也可能没有规格,所以中间的cell的高度是根据规格的多少而变化的,那么collectionView创建完成以后要怎么通知tableV