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

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

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

css的做法是： 精心开发5年的UI前端框架！

.代码  

  1. <div style="overflow:hidden">
  2. <div id="left" style="margin-bottom:-10000px; padding-bottom:10000px;"></div>
  3. <div id="right" style="margin-bottom:-10000px; padding-bottom:10000px;"></div>
  4. </div>

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

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

代码如下： 精心开发5年的UI前端框架！

.代码  

  1. var height = document.getElementById("left").offsetHeight > document.getElementById("right").offsetHeight ?
  2. document.getElementById("left").offsetHeight : document.getElementById("right").offsetHeight;
  3. document.getElementById("left").style.height = document.getElementById("right").style.height = height + "px";

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

时间： 2024-11-05 11:31:00

关于两个div高度保持一致的（css+js）两种解决办法的相关文章

JQuery控制两个Div高度一致

<script type="text/javascript"> $(function(){ if($("#left").height() > $("#right").height()){ $("#right").css("height",$("#left").height()); }else{ $("#left").css("height&

Eclipse 安装 ADT 失败的两种解决办法 [Android Development Tooling]

原因 最近想在新装的 Win7 里搭建一下 Android 的开发环境,虽然现在有 Android Studio 了,不过还是习惯 Eclipse 一点.众所周知的原因,Eclipse 直接安装 ADT(Android Develepment Tooling) 插件是不行的,这里给出两种解决办法,我们的前提是要先安装 Google 的 翻[email protected]!墙工具 GoAgent . 一.使用 Proxy 由于直接访问是不行的,所以你可以使用 VPN 或者 GoAgent 做为

OK6410 无法rmmod卸载模块 两种解决办法

OK6410  无法rmmod卸载模块  两种解决办法 这个问题一度让我觉得很奇怪... 可以看出我怎么rmmod都没用,那个模块就在那里...我换用了rmmod_by_EOF就没事了~ 方法一: 这个开发板自带文件系统的rmmod命令不行,在好心bloger的帮助下,自己重新编译一个 #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <fcntl.h> #include

js实现从字符串中查找出现次数最多的字符的两种解决办法

方法一:正则表达式匹配 1 var str = "adadfdfseffserfefsefseeffffftsdg"; 2 var maxLength = 0; var result = ""; 3 while (str != '') { 4 oldStr = str; 5 getStr = str.charAt(0); 6 str = str.replace(new RegExp(getStr, "g"), ""); 7 i

multipart/form-data请求 -Python 两种解决办法

今天遇到requests 请求的一种新情况,请求方法 multipart/form-data.下面提供两种解决办法. 第一种 第二种 from urllib3 import encode_multipart_formdata import requests data = {"districtId":"1","page":1,"pageSize":"10"} headers = { "Content

让div等块级元素水平以及垂直居中的解决办法

一.背景 我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让div等块级元素居中.在本文中,我将给大家讲述如何用CSS和jQuery两种方法让div等块级元素水平和垂直居中. 二.解决办法 1.CSS让div等块级元素水平居中 原理:让一个div等块级元素水平居中,直接用CSS就可以做到.只要设置了div等块级元素的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得d

java.lang.IllegalArgumentException: pointerIndex out of range两种解决办法

java.lang.IllegalArgumentException: pointerIndex out of range 在做拍摄海报功能的时候需要拍摄界面的surface进行手势缩放,做多点触控放大缩小,操作时发生这个异常,如果是操作图片的放大缩小多点触控不会出现这个错误,这个bug是Android系统原因此处给出两种解决方式: 第一种方式是: 修改frameworks\base\core\jni\android_view_MotionEvent.cpp的android_view_Motio

WordPress引入css/js两种方法

WordPress引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多,说法不一,我们今天借鉴wordpress官方最新的twentysixteen主题来学习总结一下WordPress引入css/js各种常用方法,以及最优化的加载方法. 其实网上的N种方法总结起来就两种:一.模板文件header.php中直接引入文件二.在主题的functions.php中通过WP自带的函数wp_enqueue_scri

div里包含img底部多出3px的解决办法

如果将一个img放在div里面,你会发现在img下面无端端的就多出3px的空白出来.padding.margin.border都设为0,无效!那么怎么解决这个问题呢? 问题图: 解决后的效果: 这个Bug真是十分有意思,不过有N多种解决办法! 1.设置div{ font-size: 0} 2.设置img{ display: block} 3.设置img{ vertical-align:top;} 当然推荐第二种方法,让img对象成为块级元素.

布局：上下两个div高度固定，中间自适应

需求:经典布局 -- 头尾固定高度中间高度自适应布局 头部固定高度,宽度100%自适应父容器: 底部固定高度,宽度100%自适应父容器: 中间是主体部分,自动填满,浏览器可视区域剩余部分,内容超出则中间部分出现流动条: 整个内容填满浏览器可视区域,并且不超出此区域! 方法1:position:absolute定位,不设高,并改变"包含块"的尺寸渲染 固定头尾,所以,至少头和尾要用到position定位.因为浏览器大小是可以调节的,而且不同尺寸,不同分辨率的浏览器可视区域的高度是不固定的