Question

我试图设置一个包含2个子元素的div的自动高度，这些元素定位固定且完全相应。

我希望我的父容器具有自动高度但我知道这很难，因为子元素从页面结构中取出它们的位置。

我已经尝试将高度设置为我的父div工作，但是我的布局响应，当它缩小到移动时，高度保持相同，其中内容变得堆叠，因此高度需要增加它的孩子。

不确定这是否有意义，我没有我的实际代码在我身上但是我做了一个小提琴试图解释......

http://jsfiddle.net/dPCky/

Answer 1

当父级div的子位置为绝对/固定时，父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/

如果你愿意调整你的HTML，我通常会避免在做可能有css或html级别修复的事情时尽可能使用javascript。

Answer 3

派对有点晚了，但这可能对某人有所帮助，因为这是我最近在没有JS的情况下解决问题的方法 - 如果孩子们在移动设备收缩时保持他们的宽高比。我的例子涉及为上下文制作一个jQuery.cycle幻灯片响应。不确定这是否是您正在尝试实现的目标，但它涉及绝对定位的容器，其容器在移动设备上具有100％的页面宽度，在较大的屏幕上具有明确的尺寸。

您可以将父级的高度设置为使用视口宽度单位（vw），因此高度会相对于设备的宽度进行调整。目前支持足够广泛，大多数移动设备将正确使用这些单元，错误和部分支持与vw（而不是与IE中的vmin和vmax）相关。只有Opera Mini处于黑暗中。

在不知道孩子们在这个例子中的响应点之间做了什么（jsfiddle有明确的高度设置），让我们假设孩子的高度相对于设备宽度可预测地缩小，这让你公平准确地假设基于宽高比的高度。

.container{ height: 75vw; }

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

如果你想要100vw作为宽度测量，请注意caniuse上的已知问题＃7，但是这里我们正在玩高度！

Answer 4

如果您不想使用JavaScript，可以参考此答案https://stackoverflow.com/a/33788333/1272106。

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

Answer 5

享受适用于任何设备和视口大小或旋转的容器的自动高度。

已经测试了 float，inline-block，absolute，margin和padding 设置给孩子。

<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 6

正确的方法...简单。没有Java语言。

<div class="container">
    <div class="faq-cards">    
      <div class="faq-cards__card">Im A Card</div>
      <div class="faq-cards__card">Im A Card</div> 
      <div class="faq-cards__card">Im A Card</div> 
      <div class="faq-cards__card">Im A Card</div> 
      <div class="faq-cards__card">Im A Card</div> 
      <div class="faq-cards__card">Im A Card</div> 
      <div class="faq-cards__card">Im A Card</div>
    </div>
</div>

.container { 
 height:auto;
 width: 1280px;
 margin:auto;
 background: #CCC;
}
.faq-cards { 
 display:flex;
 flex-wrap:wrap;
 justify-content: center;
 position:relative;
 bottom:40px;
 height:auto;
}
.faq-cards__card {
  margin:10px;
  position:relative;
  width:225px;
  background: beige;
  height: 100px;
  padding:10px;
  text-align: center;
}

https://codepen.io/GerdSuhr/pen/jgqOJp

Answer 7

与@ 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 8

更简单的方法是：

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

具有绝对/固定子项的父容器上的自动高度

8 个答案: