让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 ...
随机推荐
- Ext布局篇
EXT标准布局类 收藏 面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上.E ...
- 解決 IE10 浏览器无法使用 ASP.NET From 验证登录的问题
最近应项目用到ASP.Net表单验证机制(FormsAuthentication),来判断用户是否已经登录,一切测试顺利,最后发布到IIS中后在IE10测试是发现始终判断用户没登录(其他浏览器一切正常 ...
- android上传json与服务器交互
http://www.2cto.com/kf/201403/289328.html http://www.tuicool.com/articles/FZJR3eB
- Database.SetInitializer的几种参数
一:数据库不存在时重新创建数据库 Database.SetInitializer<testContext>(new CreateDatabaseIfNotExists<testCon ...
- Intellij IDEA开发第一个android应用教程
用惯eclipse的同学们可以试试通过Intellij IDEA来开发一个android应用.下面是具体的教程. 首先:下载Intellij IDEA.最新版本是12.官方提供两个版本.一个是Comm ...
- [Django] Pinax 项目下APP的 安装与使用
Pinax下有数十个APP,怎么将这些APP集成到已有的Django 工程(http://www.cnblogs.com/xiaoqu/p/3196081.html)文件中去呢?现在用django-u ...
- 新装docker 从本地仓库下载
docker:/root# docker images Get http:///var/run/docker.sock/v1.19/images/json: dial unix /var/run/do ...
- Unix/Linux环境C编程入门教程(19)Red Hat Entetprise Linux 7.0环境搭建
位架构,包括英特尔X-86_64.Power和s390.动态定时能力将降低内核内部中断数量,Open vSwitch 2.0功能可调节虚拟机之间的流量.RHEL 7中默认的文件系统是XFS,包含了一个 ...
- POI开源项目-PPT2PNG转换测试
第一次学使用软件去读取Office类文件. 今天百度了一下,发现Apache也是有这样的开源项目的,POI提供下列支持: 测试了一下HSLF对PPT的读操作,并将PPT转化为图片保存到指定目录: 使用 ...
- Java实现邮件代理发送
使用java实现邮件发送 首先需要添加jar文件mailapi.jarstmp.jar 1 import java.util.Properties; import javax.mail.Address ...