`

关于两个div高度保持一致的(css+js)两种解决办法

阅读更多

最近修改以前写的一些代码,发现点问题。

比如2个div需要动态的保持一致的高度。

css的做法是: 可以500%提高开发效率的前端UI框架!

.代码  收藏代码
  1. <div style="overflow:hidden">  
  2.           
  3. <div id="left" style="margin-bottom:-10000px; padding-bottom:10000px;"></div>  
  4.           
  5. <div id="right" style="margin-bottom:-10000px; padding-bottom:10000px;"></div>  
  6.           
  7. </div>  

 

 

 

如果实际的高度不大于10000px,那么这个是没有问题的,如果有一边的实际高度大于了10000px,则另外一边的高度只能被定义为10000px,不符合实际运用的需求。

 

经过测试,用js可以解决这个问题。

代码如下: 可以500%提高开发效率的前端UI框架!

.代码  收藏代码
  1. var height = document.getElementById("left").offsetHeight > document.getElementById("right").offsetHeight ?   
  2.     document.getElementById("left").offsetHeight : document.getElementById("right").offsetHeight;  
  3.           
  4.           
  5. document.getElementById("left").style.height = document.getElementById("right").style.height = height + "px";  

 

 

 

另外,在实际运用,可能还会存在由于左div或右div存在padding属性而导致上述取值变多或变少的问题。比如,最终赋值时发现left比right还高10px,这种情况只有手动在代码里面减10来解决了。这也是不太完美的地方。

0
0
分享到:
评论

相关推荐

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越...

    div模块层随页面滚动遇顶固定的两种方法(js&jQuery)

    当浮动层div与浏览器窗口上边缘接触的一瞬间,其页面垂直偏移值与页面的滚动高度是一致的,所以我们就用这个进行判断。那如何获得页面上元素距离页面的垂直距离呢? 这里则是使用javaScript库实现。

    保持固定表头和表体宽度一致,dom中js的妙用.docx

    如果将内容显示在表格中,内容较多的情况下会出现垂直滚动条,在向下滚动时,表头会被隐藏,这对查看内容非常不便,一个解决办法是,采用上下两个放在不同div中的表,上面的专门放表头,下面的显示详细内容。...

    ScrollNews 新闻无缝循环滚动切换特效 ScrollNews 新闻无缝循环滚动切换特效,不错的滚动效果,压缩包内的示例包括横向和竖向两种形式的滚动,本滚动结合图片和文字,运用CSS和Javascript技术,将滚动的内容扩展至DIV标签,也就是控制某个区域的滚动,而并非是一行或几个简单图片构成的滚动。

    不错的滚动效果,压缩包内的示例包括横向和竖向两种形式的滚动,本滚动结合图片和文字,运用CSS和Javascript技术,将滚动的内容扩展至DIV标签,也就是控制某个区域的滚动,而并非是一行或几个简单图片构成的滚动。

    CSS3实现swap交换动画

    主要为大家介绍了CSS3实现swap动画,实现一个交换动画,一个笑脸慢慢从远处,回到自己的原来位置的一种效果,这种动画在JS里面也是很多见的,感兴趣的小伙伴们可以参考一下

    css等高布局常用几种方式

    指在同一个父容器中,子元素高度相等的布局. 从等高布局实现方式来说,又分为两类 伪等高 子元素高度差依然存在,只是视觉上给人感觉就是等高. 真等高 子元素高度相等 先来看看伪等高实现方式 通过负margin和Padding...

    使用JS配合CSS实现Windows Phone中的磁贴效果

    Windows Phone的tile设计的美丽对我...每个tile包含了两个分别在前后的div。他们都能包含要展示的信息。下面的html代码生成所需的tile布局。 tile设计包含了CSS的类名 CSS Code复制内容到剪贴板 &lt;div class="con

    css模块化方案

    面对对象的规则,主要的原则是两种:分离结构和外观,分离容器和内容。 名词解释 分离结构和外观:增加可重复的设计单元,同时去推进产品和ui对这方面的思考,比如下面的css使用时对象模式的命名和模块化规则。 ...

    自制单选(radiobox)和多选(checkbox)控件

    2、想用css做出toggle switch那种感觉很困难,而且这种开关只支持开和关两种状态,如果有很多状态的话,就不好办了。 基本思路是在用一个div包住各选项,在div中防止N个label(别的控件也行)来做选项,每个选项的值...

    基于jsp+servlet的在线问卷

    下面进一步说明一下,整个界面是采用div+css设计,源码中包括了两种搜集答案的方式,一种是提交之后自动发送邮件到指定邮箱,另一种就是将答案保存在数据库中,根据自己情况选择 数据库:table---result fields:id,...

    Javascript模块化管理库jmd.js.zip

    jmd.js 是极小型、高性能 Javascript 模块化管理库(浏览器端)。特点遵循规范,可以像Node.js 一样来写模块代码(参见:AMD、CMD)完全异步,不对源码做任何改动、没eval、setTimeout,全速加载!干干净净,只有一个...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...

    before-after-image-compare:比较一个框中的 2 个图像(使用 javascript 和 scss)

    两个方式都是IE9+ 才看的懂分割检视可使用角度,角度在SASS 决定,JS再捞出角度/边长比SVG : (最后实作)以js 侦测到支援SVG 后,动态置换原本DIV 内容,以滑鼠位置决定(水平或垂直)分割检视的位置css transform: (最...

    ExtAspNet_v2.3.2_dll

    -Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...

    JavaScript模拟烟花炸裂

    两种烟花都需要再js中添加,所以body内只需要一个div: 需要在css中对div进行修饰,并且提前对两种方式的烟花进行修饰: #container{ width: 80%; height: 600px; border: 2px solid red; background: #000; ...

    html-css-js-practice

    html-css-js-practiceHTML1.HTML元素的类型? -HTML元素-1主要有两种类型。块级元素-块级元素总是从新行开始。 块级元素始终占用可用的全部宽度。 它具有顶部和底部--- margin,而内联元素则没有。 -例如:div,地址...

    connect4:Connect 4模仿(HTMLCSS和jQuery)

    有两个值输入,玩家1的选择和玩家2的选择。 我将播放器1表示为红色,将播放器2表示为黑色。 这些值从下往上填充,我根据轮到谁来评估输入值(红色或黑色)。 第一回合(玩家1)将填充红色值,第二回合(玩家2)将...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    /js/all.js JavaScript脚本文件 /images 图片文件 第24章(/ch24) 程序描述:本章将使用Ajax技术实现无刷新即可浏览RSS的阅读器。添加一个RSS地址时,自动保存到数据库。打开阅读RSS时,自动获取...

    jQuery详细教程

    hide() 和 show() 都可以设置两个可选参数:speed 和 callback。 语法: $(selector).hide(speed,callback) $(selector).show(speed,callback) speed 参数规定显示或隐藏的速度。可以设置这些值:"slow", "fast", ...

    利用JavaScript实现新闻滚动效果(实例代码)

    最近要实现一个滚动新闻效果,在网上查了一些资料,发现基本的实现方法有两种: 1.使用Marquee标签。这个标签的使用我已经转载了一篇比较详细的文章,这个标签的优点是便于使用,缺点是人们已经逐渐不适用它了,许多...

Global site tag (gtag.js) - Google Analytics