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 that you have read and understand our privacy policy and code of conduct.

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