901web前端博客

人生就像一副复杂拼图
每个人总有属於自己的记忆碎片
Theme By 网上下载

联系我

RSS

一月 23, 2015

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

最近在工作中碰到一个需求:

有左右2个并列的div,2个div都不能限定高度。左div为导航,右div为内容。如何能让左div块自动获得和右div块相等的高度?

左右等高测试

实现代码:(html)

	<h3>1.右边div内容高度小于左边div</h3>

	<div id="left">

			14万公里收费10万在中国 委员建议——全国收费公路彻底整顿14万公里收费10万在中国 委员建议——全国收费公路彻底整顿14万公里收费10万在中国
			全国收费公路彻底整顿14万公里收费10万在中国

	</div>

	<div id="right">

			14万公里收费10万在中国委员建议——全国收费公路彻底整顿14万公里收费10万在中国 
			委员建议——全国收费公路彻底整顿14万公里收费10万在中国
			委员建议——全国收费公路彻底整顿14万公里收费10万在中国 

	</div>

(css样式代码部分)

#left{background:#999;float:left;width:100px;}
#right{background:#0066ff;color:#fff;width:300px;float:left;}
.clear{clear:both;}

(javascript代码部分)

<script>
	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();
}

</script>

查看demo

相关文章

返回