絕對/固定兒童的父容器上的自動高度

Question

我試圖設置一個自動高度包含2個子元素的div，位置固定，並且絕對分段。

我想我的父容器有一個自動高度，但我知道這是很難的，因爲子元素從他們的位置取出頁結構。

我已經嘗試設置一個高度，以我的父div的工作，但與我的佈局是響應，當其縮小到移動時，高度保持不變，因爲內容成爲堆疊，所以高度需要增加與其子女。

不知道這是有道理的，我沒有我的實際代碼對我大氣壓，但香港專業教育學院做了一個小提琴試圖解釋...當它的孩子

http://jsfiddle.net/dPCky/

Answer 1

父DIV不能使用height:auto定位絕對/固定。

您將需要使用JavaScript來實現這一點。

在jQuery的一個例子：

var biggestHeight = 0; 
// Loop through elements children to find & set the biggest height 
$(".container *").each(function(){ 
// If this elements height is bigger than the biggestHeight 
if ($(this).height() > biggestHeight) { 
    // Set the biggestHeight to this Height 
    biggestHeight = $(this).height(); 
} 
}); 

// Set the container height 
$(".container").height(biggestHeight); 

工作實例 http://jsfiddle.net/blowsie/dPCky/1/

Answer 2

http://jsfiddle.net/dPCky/32/ - 使用float:left;

http://jsfiddle.net/dPCky/40/類似的效果 - 更緊密導致到你想要的效果。

如果你願意改變你的html，那麼你可以做我以上所做的。

我學會從以下教程，我會極力推薦給任何人誰願意成爲HTML/CSS定位職業定位：

http://www.barelyfitz.com/screencast/html-training/css/positioning/

我一般會避免使用JavaScript做的事情時，如果可能的話如果你願意調整你的html，可能會有一個CSS或HTML級別的修復。

Answer 3

一個更簡單的方法是：

$(".container").height($(document).height()); 

Answer 4

享受集裝箱此自動高度，能夠適應任何設備和視調整大小或旋轉。

它已經通過浮球，內嵌塊，絕對，邊距和填充進行測試設置爲孩子。

<div class="autoheight" style="background: blue"> 
    <div style="position: absolute; width: 33.3%; background: red"> 
    Only 
     <div style="background: green"> 
     First level elements are measured as expected 
     </div> 
    </div> 
    <div style="float:left; width: 33.3%; background: red"> 
    One Two Three Four Five Six Seven Eight Night Ten 
    </div> 
    <div style="float:left; width: 33.3%; background: red"> 
    One Two Three Four Five Six 
    </div> 
</div> 

<script> 
function processAutoheight() 
{ 
    var maxHeight = 0; 

    // This will check first level children ONLY as intended. 
    $(".autoheight > *").each(function(){ 

     height = $(this).outerHeight(true); // outerHeight will add padding and margin to height total 
     if (height > maxHeight) { 
      maxHeight = height; 
     } 
    }); 

    $(".autoheight").height(maxHeight); 
} 

// Recalculate under any condition that the viewport dimension has changed 
$(document).ready(function() { 

    $(window).resize(function() { processAutoheight(); }); 

    // BOTH were required to work on any device "document" and "window". 
    // I don't know if newer jQuery versions fixed this issue for any device. 
    $(document).resize(function() { processAutoheight(); }); 

    // First processing when document is ready 
    processAutoheight(); 
}); 
</script> 

Answer 5

有點遲到了，但是這可能幫助別人，因爲這是我最近怎麼解決的問題，而JS - 如果孩子保持自己的高寬比，因爲他們收縮的移動設備。我的例子涉及到使上下文響應jQuery.cycle幻燈片。不確定這是否是你想要達到的上面，但它涉及一個容器中的絕對定位的孩子，它在移動和顯示尺寸在大屏幕上具有100％的頁面寬度。

您可以將父級的高度設置爲使用視口寬度單位（vw），因此高度將根據設備的寬度進行調整。如今支持範圍非常廣泛，大多數移動設備都將正確使用這些設備，錯誤和部分支持與vw（而不是vm和vmax在IE中）無關。只有Opera Mini在黑暗中。

在這個例子中（jsfiddle有明確的高度設置），不知道孩子們在做什麼，孩子們正在做什麼，我們假設孩子的身高相對於設備寬度按比例縮小，這可以讓你相當準確地假設基於高寬比的高度。

.container{ height: 75vw; }

http://caniuse.com/#feat=viewport-units

請在caniuse筆記已知問題＃7，如果你打算爲100vw爲寬度的措施，但是在這裏我們有高度的玩！

Answer 6

相關的@ Blowsie的回答是：

/** 
* Sets the height of a container to its maximum height of its children. This 
* method is required in case 
* 
* @param selector jQuery selector 
*/ 
function setHeightByChildrenHeight(selector) 
{ 
    $(selector).each(function() 
    { 
     var height = 0; 

     $(this).children("*").each(function() 
     { 
      height = Math.max(height, $(this).height()); 
     }); 

     $(this).height(height); 
    }); 
}; 

Answer 7

如果你不想使用JavaScript，你可以參考這個答案https://stackoverflow.com/a/33788333/1272106。

簡短說明：複製一個元素並設置可見性以隱藏以展開父級。