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

【问题标题】：Auto height on parent container with Absolute/Fixed Children具有绝对/固定子级的父容器上的自动高度
【发布时间】：2012-02-22 02:36:00
【问题描述】：

我正在尝试为包含 2 个子元素的 div 设置自动高度，这些子元素的位置固定且绝对分别。

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

我尝试为我的父 div 设置一个高度，但我的布局是响应式的，当它缩小到移动设备时，高度保持不变，因为其中的内容变得堆叠，所以高度需要增加它的孩子。

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

http://jsfiddle.net/dPCky/

【问题讨论】：

标签： html mobile css responsive-design

【解决方案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/

【讨论】：

* 选择所有孩子，我也可以写 $(".container").children().each()，这样可能会更有效率。如果您只想选择直接子代而不是子代的子代，您可以执行 $(".container > *")
在此处阅读有关 * 选择器和其他选择器的更多信息。 net.tutsplus.com/tutorials/html-css-techniques/…
@Ninjab 当然，您可以将函数包装在 $(window).on('resize', function(){}) 中，但是如果您这样做，您绝对应该使用两件事来提高性能。 - 对函数调用进行去抖动 - 以防止它们被过于频繁地调用 - 将要调整大小的元素缓存到变量中，以提高性能
@Ninjab，因为这个答案相当陈旧，根据您的用例，您可能希望使用更新的纯 CSS 方法，由于现代浏览器支持 CSS，这些方法现在更可行
@Ninjab 取决于您的场景，但使用 vh 单位是可能的。

【解决方案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。

【讨论】：

“我通常会尽可能避免使用 JavaScript”在这个例子中非常正确，特别是如果你的内容是动态的或你的宽度是流动的
@Blowsie 我能问一下，如果你的宽度是流动的，为什么你会避免它？你不能用 .resize() 运行这个函数吗？
@Liam 你确实可以使用 $(window).resize();事件以重新运行您的功能。不使用可变宽度脚本的原因是，如果元素本身具有可变宽度，则元素的高度将根据您的屏幕窗口宽度而变化，因此每次窗口大小发生变化时您都必须调整它们的大小。

【解决方案3】：

更简单的方法是：

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

【讨论】：

【解决方案4】：

为适应任何设备和视口调整大小或旋转的容器享受此自动高度。

它已经在 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>

【讨论】：

【解决方案5】：

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

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

在不知道本例中孩子们在响应点之间做什么的情况下（jsfiddle 设置了明确的高度），让我们假设孩子们的高度相对于设备宽度可预测地按比例缩小，这样您就可以相当准确地假设高度基于纵横比。

.container{ height: 75vw; }

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

如果您要使用 100vw 作为宽度测量值，请注意关于 caniuse 的已知问题 #7，但这里我们正在使用高度！

【讨论】：

这正是我所需要的……你是我翅膀下的风。

【解决方案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);
    });
};

【讨论】：

【解决方案7】：

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

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

【讨论】：

会影响SEO吗？

【解决方案8】：

正确的方法...简单。没有Javascript。

<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 {
    position: relative;

    margin: 10px;
    padding: 10px;

    width: 225px;
    height: 100px;

    background: beige;
    text-align: center;
}

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

【讨论】：