纯css能否做到,两个div高度 相互关联,

hyxj1220 发布于 2013/05/30 23:16
阅读 3K+
收藏 1

情况是这样的。我需要左右并列的两个div,两个div的高度是由 其中一个div内容高度决定的(而这个决定性的div,内容不是固定的)。要在修改这个div内容时,另外一个div的高度识相的改变自己的高度 ,并与前者相等。试了许多方法都无法解决。

现在先用jquery克服这个问题了,,问问大家有没有只用css的方法实现等高度的要求,

$("div#menu_area").height($("div.middle_area").height());

<div class="middle_area">test test<div>

<div id="menu_area">test testtest testtest testtest testtest testtest testtest testtest testtest test</div>

加载中
1
MuBeiBei
MuBeiBei
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Div + CSS Example</title> 
<style type="text/css"> 
<!-- 
#wrap{overflow:hidden;} 
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;} 
--> 
</style></head> 

<body> 
<div id="wrap" style="width:300px; background:#FFFF00;"> 
<div id="sidebar_left" style="float:left;width:100px; background:#FF0000;">Left</div> 
<div id="sidebar_mid" style="float:left;width:100px; background:#666;"> 
Middle<br /> 
Middle<br /> 
Middle<br /> 
Middle<br /> 
Middle<br /> 
Middle<br /> 
Middle<br /> 
Middle<br /> 
Middle<br /> 

</div> 
<div id="sidebar_right" style="float:right;width:100px; background:#0000FF;">Right</div> 
</div> 
</body> 
</html>
pfdoschina
pfdoschina
这样竟然可以! 什么原理?为什么设置为浮动后就可以解决了?
hyxj1220
hyxj1220
原来div也可以
0
jingshishengxu
jingshishengxu
用table 间接实现一下了,将div 用td 代替,就一样高了
0
gnefil.nil
gnefil.nil

table应该是兼容所有浏览器的最便捷方法了。。。

ie8,chrome,firefox 可以用 display:table-cell; 

0
王瑞平
王瑞平

css设置height:auto;

这也不行的话就没办法了

0
雁南飞飞
雁南飞飞

可以实现,分别设置div的margin  padding  就行了

0
hyxj1220
hyxj1220
谢谢各位 ,td真心很好
0
梅开源
梅开源
把div放div里,浮动,就可以让外面的跟着变了
0
hyxj1220
hyxj1220
你们好给力啊 thank you
0
罪恶的花生
罪恶的花生
被控制的DIV高度改成auto,就可以随着内容的增加而增加
返回顶部
顶部