绝对/固定儿童的父容器上的自动高度

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。

简短说明：复制一个元素并设置可见性以隐藏以展开父级。