Авто высота на родительском контейнере с Абсолютными/Исправленными детьми

Ответ 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/

Ответ 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, когда это возможно, когда вы делаете что-то, что потенциально может иметь исправление уровня css или html, если вы хотите настроить html.

Ответ 3

Немного поздно для вечеринки, но это может помочь кому-то, так как я недавно разрешил проблему без JS - если дети сохраняют соотношение сторон, поскольку они сокращаются для мобильных устройств. Мой пример относится к тому, чтобы сделать слайд-шоу jQuery.cycle отзывчивым, для контекста. Не уверен, что это то, чего вы пытаетесь достичь выше, но в нем участвовали абсолютно позиционированные дети в контейнере, который имеет 100% ширину страницы в мобильных и явных размерах на больших экранах.

Вы можете установить родительскую высоту для использования единиц ширины видовых экранов (vw), чтобы высота адаптировалась относительно ширины устройства. В наши дни поддержка достаточно широка, что большинство мобильных устройств будут правильно использовать эти устройства, ошибки и частичная поддержка не относятся к vw (а скорее к vmin и vmax в IE). Только Opera Mini находится в темноте.

Не зная, что делают дети между отзывчивыми точками в этом примере (jsfiddle имеет явные высоты), пусть предполагается, что высота детей масштабируется вниз относительно ширины устройства, что позволяет довольно точно предположить высоту на основе соотношения сторон.

.container{ height: 75vw; }

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

Обратите внимание на известную проблему №7 на caniuse, если вы собираетесь на 100vw в качестве меры ширины, но здесь мы играем с высотой!

Ответ 4

Если вы не хотите использовать JavaScript, вы можете ссылаться на этот ответ fooobar.com/questions/23508/....

Краткое описание: дублируйте один элемент и установите видимость, чтобы скрыть, чтобы развернуть родителя.

Ответ 5

Наслаждайтесь этой автоматической высотой для контейнера, которая адаптируется к любому размеру или повороту любого устройства и видового экрана.

Он был протестирован с помощью float, inline-block, absolute, margin и padding, установленным для 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>

Ответ 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

<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

Ответ 8

Более простой способ:

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