Автоматическая высота родительского контейнера с абсолютными / фиксированными дочерними элементами

html css mobile css3 responsive-design

68425 просмотра

8 ответа

Я пытаюсь установить автоматическую высоту div, который содержит 2 дочерних элемента, расположенных фиксированным и абсолютно соответствующим образом.

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

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

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

http://jsfiddle.net/dPCky/

Автор: Liam Источник Размещён: 12.11.2019 09:17

Ответы (8)


35 плюса

Решение

Родительский 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/

Автор: Blowsie Размещён: 30.01.2012 09:22

7 плюса

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.

Автор: Anicho Размещён: 30.01.2012 09:39

2 плюса

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

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

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

.container{ height: 75vw; }

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

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

Автор: Shale Размещён: 03.12.2015 09:30

2 плюса

Если вы не хотите использовать JavaScript, вы можете обратиться к этому ответу https://stackoverflow.com/a/33788333/1272106 .

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

Автор: Ricky Jiao Размещён: 26.06.2017 02:36

1 плюс

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

Он был протестирован с помощью float, inline-block, absolute, полей и отступов, установленных для 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>
Автор: Heroselohim Размещён: 05.10.2014 06:15

1 плюс

Правильный путь ... простой. Нет 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

Автор: Foobar Размещён: 23.07.2019 08:54

0 плюса

Относится к ответу @ Blowie:

/**
 * 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);
    });
};
Автор: djmj Размещён: 28.03.2016 03:40

-5 плюса

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

$(".container").height($(document).height());
Автор: Victory Hymn Размещён: 26.11.2013 10:48
Вопросы из категории :
32x32