Auto height on parent container with Absolute/Fixed Children

Question

Im trying to set an automatic height a div that contains 2 child elements, positioned fixed and absolutely respecitvely.

I want my parent container to have an auto h

Answer 1

Related to @Blowsie's answer:

/**
 * 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 2

The parent div can not use height:auto when its children are positioned absolute / fixed.

You would need to use JavaScript to achieve this.

An example in 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);

Working example http://jsfiddle.net/blowsie/dPCky/1/

Answer 3

Enjoy this auto height for container that adapts to any device and viewport resize or rotation.

It has been tested with float, inline-block, absolute, margins and padding set to the childs.

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

An easier way is:

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

Answer 5

The right way... simple. No 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

Answer 6

A little late to the party, but this may help someone as this is how I resolved the issue recently without JS - IF the children maintain their aspect ratio as they shrink for mobile devices. My example relates to making a jQuery.cycle slideshow responsive, for context. Unsure if this is what you're trying to achieve above, but it involved absolutely positioned children within a container which has 100% page width on mobile and explicit dimensions on larger screens.

You can set the parent's height to use viewport width units (vw), so the height adapts relative to the device's width. Support is broad enough these days that most mobile devices will use these units correctly, bugs and partial support don't relate to vw (but rather, to vmin and vmax in IE). Only Opera Mini is in the dark.

Without knowing what the children are doing between responsive points in this example (the jsfiddle has explicit heights set), let's assume the height of the children scales down predictably relative to the device width, which allows you to fairly accurately assume the height based on aspect ratio.

.container{ height: 75vw; }

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

Do note known issue #7 on caniuse if you're going for 100vw as a width measure, but here we're playing with height!