如何強制外部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的高度？

回答

相關問題