让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/sharesun@126/blog/static/5749096200931121250435/让并排的两个Div自适应高度(一样高)
让2个并列的div根据内容自动保持同等高度js的更多相关文章
- 如何让2个并列的div根据内容自动保持同等高度
最近在工作中碰到一个需求: 有左右2个并列的div,2个div都不能限定高度.左div为导航,右div为内容.如何能让左div块自动获得和右div块相等的高度? 同时,也有网友提问到"如果右 ...
- 固定高度div,随内容自动变高css定义方法
*{ font-size:12px; margin:0; padding:0;}方法1:#testBox{border:1px solid #cccccc;padding:5px;width:220p ...
- div 文章内容自动分屏显示
<head runat="server"> <title></title> <script language="javascri ...
- 为什么当多个inline-block的div中,如果有的div没有内容而有的div有内容,有内容的会下沉?
为什么当多个inline-block的div中,如果有的div没有内容而有的div有内容,有内容的会下沉? 就像这样 两个div高度相同,第二个我写了一个1当作 有内容吧,它就下沉了... 奇怪... ...
- DIV的内容自动换行
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行. 它们的区别就在于: 1,word-break:break-all 例如div宽 ...
- CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...
- 05网页<div></div>块内容
网页<div></div>块内容 <header>此处为新 header 标签的内容</header> <navigation>此处为新 n ...
- 下拉列表 通过option 改变div的内容
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 万能js实现翻页,动态生成内容自动翻页,兼容各种浏览器(已测试)----神器版!
转--http://www.2cto.com/kf/201402/277535.html 万能js实现翻页,动态生成内容自动翻页,兼容各种浏览器(已测试)----神器版! 2014-02-11 ...
随机推荐
- 什么是 CSS 预处理器?
什么是 CSS 预处理器? 就CSS本身而言,对于大多数Web前端从业人员来说就不是问题.学过CSS的人都知道,它不是一种编程语言.你可以用它开发网页样式,但是没法用它编程.换句话说,CSS基本上是 ...
- mysql学习(七)-索引学习
常规索引: 在常用查询的字段上使用常规索引 创建表时一块创建索引 create table if not exists carshop(id int not null auto_increment, ...
- mysql表结构设计
允许NULL值的字段,数据库在进行比较操作时,会先判断其是否为NULL,非NULL时才进行值的必对.因此基于效率的考虑,所有字段均不能为空,即全部NOT NULL: 对于变长表,由于记录大小不同,在其 ...
- map循环
Map<String, String> maps = new HashMap<String, String>(); maps.put("_id", &qu ...
- Android_使用getIdentifier()获取资源Id
Android 获取资源ID的另外一种方法,常规获取ID是在特定的文件夹下面的资源,如果在比较特殊的文件夹下面,就需要其他方法获取ID 了: 使用getIdentifier()方法可以方便的获各应用包 ...
- Django模板-分离的模板
上一篇Django模板-在视图中使用模板最后的问题,我们需要把数据和展现分离开. 你可能首先考虑把模板保存在文件系统的某个位置并用 Python 内建的文件操作函数来读取文件内容. 假设文件保存在 E ...
- PHP发红包程序
//红包算法$total = 20; //红包总金额$num = 10; //红包个数$min = 0.01; //每个人最少能收到0.01 for ($i=1;$i<$num; ...
- PHP中简单的图形处理
PHP中简单的图形处理 计应134凌豪 1.加载GD库 GD库是一个开放的动态创建图像.源代码公开的函数库,可以从官方网站http://www.boutell.com/gd处下载.目前,GD库支持GI ...
- Python学习路径和个人增值(整合版)
PS:内容来源于网络 一.简介 Python是一种面向对象.直译式计算机程序设计语言,由Guido van Rossum于1989年底发明.由于他简单.易学.免费开源.可移植性.可扩展 ...
- windows程序设计读书笔记3——字符显示2
由于显示的字符可能会不全,我们很容易想到的一个解决办法是使用滚动条. 先看一下代码,再进行分析: /*------------------------------------------------- ...