如何强制外部div扩展到内部div的高度？

我有一个到<div class="content"> ajaxed数据。我想让外部div扩展到内部div的高度。我无法弄清楚如何做到这一点。如何强制外部div扩展到内部div的高度？

HTML：

<div class="outer"> 
    <div class="inner"> 
     <div class="content">Stuff goes here</div> 
    </div> 
</div>

CSS：

.outer { 
    width: 740px; 
    min-height: 250px; 
    margin: 0 auto; 
    position: relative; 
    margin-bottom: 10px; 
} 

.inner { 
    position: absolute; 
    top: 70px; 
    left: 10px; 
    width: 335px; 
    bottom: 0; 
} 

.content { 
    font-size: 13px; 
    margin: 0 0 7px 0; 
    text-align: left; 
    position: relative; 
}

我要外的div扩大到无论是内部<div class="content"></div>高度。我怎样才能做到这一点？

来源

2012-11-23 Aaron Brokmeier

我没有使用JavaScript的，因为我认为有一种方法只使用来实现这一CSS。 –

这种情况发生时，你在你的CSS使用位置。从INNER类删除POSITION，OUTER div将正确扩展。也许你可以使用利润来定位你内心的div。

编辑：

这是一个可能替代的CSS为你。它可能会或可能不适合您的要求。

.outer { 
    width: 740px; 
    min-height: 250px; 
    margin: 0 auto; 
    position: relative; 
    padding-top:70px; 
    padding-left:10px; 
    margin-bottom: 10px; 
} 

.inner { 
    width: 335px; 
    bottom: 0; 
} 

.content { 
    font-size: 13px; 
    margin: 0 0 7px 0; 
    text-align: left; 
    position: relative; 
}

来源

2012-11-23 01:34:07

Thaaannnkkk你。我一直在为此奋斗了半个小时。我已经在内部分区上设置了位置。再也不。 – Jon

位置：绝对在内部div是主要问题。这是一个移除位置的例子，注意你需要添加nbsp;向外部div展示。

<!doctype html> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 

.outer { 
    width: 740px; 
    margin: 0 auto 10px auto; 
    background:#F90; 
} 

.inner { 
    margin:70px 0 0 10px; 
    width: 335px; 
    bottom: 0; 
    background:#9FF; 
} 

.content { 
    display:block; 
    font-size: 13px; 
    margin: 0 0 7px 0; 
    text-align: left; 
    background:#CCC; 
} 
</style> 
</head> 

<body> 
    <div class="outer">&nbsp; 
     <div class="inner"> 
      <div class="content">Stuff goes here. </div> 
     </div> 
    </div> 
</body> 
</html>

来源

2012-11-23 01:42:46

您可以使用javascript来调整外部div的大小。要把它放到你的AJAX请求的回调：

var $inner = $('.inner'); 
    var height = parseInt($inner.height()) + parseInt($inner.css('top')); 
    $('.outer').css('height', height);

假设你使用jQuery，这是...

来源

2012-11-23 01:49:23 Mathew

大拇指朝下的JavaScript建议...跛脚 –

为我工作！非常感谢！！！但请在此解释代码，第二行很混乱 –

如何强制外部div扩展到内部div的高度？

回答

相关问题