當inner有絕對位置時展開外部div

當內部div位於絕對位置（在具有相對位置的div內）時，外部div沒有展開時出現問題。當inner有絕對位置時展開外部div

我嘗試了清晰的各種變化：both/overflow：xxx /和height：auto。這對我來說看起來非常簡單，但根據我的預期，它根本不起作用。我剝離下來到這一點：

<div class="jumbotron"> 
    <div class=" infobox"> 
     Test 
    </div> 
</div>

而這個CSS代碼片段：

.jumbotron{ 
    background-color: #000; 
    position: relative; 
    min-height: 300px; 
} 
.jumbotron .infobox{ 
    background-color: #dddddd; 
    position: absolute; 
    bottom: 10px; 
    width: 500px; 
    height: 900px; 
}

我想實現的是具有從外DIV底部的內格「成長」起來，使外部的相應擴展。

任何幫助表示讚賞！

謝謝，達里奧

來源

2014-08-27 Dariop

這是不可能的。絕對定位的元素從文檔正常流中移除，容器不知道它們有多高或多寬。 – 2014-08-27 08:30:20

唯一的方法是添加一些js。 – 2014-08-27 08:31:28

好的，感謝您的意見。

這解決了它：

$('.jumbotron').height($('.infobox').height());

在文檔的onload一部分。

來源

2014-08-27 08:46:53 Dariop

不是100％確定你在問什麼，但看看this fiddle是否幫助你。

使用基於彼此的JQuery獲取和設置位置和高度。在創建文檔時以及調整頁面大小時觸發。正如其他人所建議的那樣，JavaSCript對於這樣的事情是需要的。 JS如下：

$(function(){ 
    $('.infobox').offset($('.jumbotron').position()); 
    $('.jumbotron').height($('.infobox').height()); 
}); 

$(window).resize(function(){ 
    $('.infobox').offset($('.jumbotron').position()); 
    $('.jumbotron').height($('.infobox').height()); 
});

來源

2014-08-27 08:56:39

謝謝，這真的有幫助;） – IchHabsDrauf 2016-08-01 16:20:47

答案很奇怪，但肯定會工作。

當內格在absolute位置，則只需添加overflow:hidden CSS在你的外層div（例如：這裏.jumbotron是外層div），你可以從外層div刪除min-height和外層div自動進行內部div的高度。

（確保外層div不應該有任何特定的高度）

來源

2015-04-23 07:01:18

當inner有絕對位置時展開外部div

回答

相關問題