1

Столкнулся с проблемой при верстке.

Имеются три блока - title, main, bottom. Главному блоку (он же средний на скриншоте) принадлежит таблица из блоков-ячеек, позиционирование которых задано через absolute.

Как сделать, чтобы средний блок изменялся в размере, в зависимости от количества строк в таблице и блок bottom ушел соответственно под него?

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

Скриншот с проблемой:

введите сюда описание изображения

Код:

.table__title {
    font: bold 30pt 'Open Sans';
    background: #18C0DF;
}

.table__main-block {
    background: #5DEA72;
}

.table__bottom-block {
    background: #8cafed;
}

.elements {
    position: relative;
}

.element {
    position: absolute;
    border: 1px solid black;
    width: 64px;
    height: 42px;
}
<div class="table">
        <div class="table__title">
            TITLE TITLE TITLE
        </div>
        <div class="table__main-block">
            MAIN-BLOCK MAIN-BLOCK MAIN-BLOCK
            <div class="elements">
                {% for element in elements_main %}
                    <div class="element element_group-{{ i }} element_period-{{ j }}">
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="table__bottom-block">
            BOTTOM-BLOCK BOTTOM-BLOCK BOTTOM-BLOCK
</div>

1 ответ 1

3

При помощи CSS невозможно автоматически выставить высоту родительского блока, дочерние, элементы которого позиционированы абсолютно. Такую задачу можно решить только с использованием Javascript.

Можно найти среди дочерних блоков минимальное значение offsetTop и максимальное значение offsetTop+height. Их разница и даст высоту родительского блока, которую следует выставлять по событиям: при загрузке, resize и пр.

1
  • спасибо за пояснение, уже переработал макет. ваш способ запомню на будущее
    – while1pass
    14 окт 2016 в 0:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.