如何让两个 并列的div高度相等

哪个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";

时间: 2024-08-28 08:03:03

如何让两个 并列的div高度相等的相关文章

让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

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

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

JQuery控制两个Div高度一致

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

三种Div高度自适应的方法

让DIV高度自适应,这是在网页设计中常遇到的问题,为了给大家提供参考,这里提供3种div高度自适应的方法:一是JS法.二是背景图填充法.三是"补丁大法"(比较变态). 1.JS法 代码如下.原理:用JS判断左右DIV的高度,若不一致则设为一致.框架资源分享 Java代码   <div style="width:500px;background:#cccccc;height:0px;"> <div id="right" style

横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法

最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子div设置float左的时候,如果另外的子div没有设置float左的 话,两个浏览器下会有区别,具体有一个会产生间隙.兼容做法就是都设置float属性.但是记住有设置过float就要将float clear掉,不然下面的div会叠在已float的div上.我通常把清除浮动写成单独的<div clas

纯div css实现的左右两个等高div

工作当中我们经常会有这样的需求,尤其是在一些内容页面或者网站后台管理页面:左边的div的高度会随着右边的div的内容的增加儿增加,右边div的高度也会随着左边div的内容的增加而增加,也就是左右两侧两个等高的div.如果不借助JS,而时淡出的使用div+css的方法该怎么实现呢?见代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>div+css实现的

四种方法解决DIV高度自适应问题

本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头疼的问题,整理了一下以前总结的方法,仅表示我也玩过. htmlcode: <div id="container"> <dividdivid="leftSide">这边的高度自适应右侧的高度</div> <dividdivid=&

&lt;转载&gt;如何解决子级用float浮动父级div高度不能自适应的问题

转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML

关于让左右2个DIV高度相等

哪个div Height值大,就将其值赋给Height值小的div,从而使2个div高度始终保持一 以下是代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div高度相等</title> <style type="text/css"> #left{background:#