Как заставить элемент растягиваться на ту же высоту, что и его контейнер?

Question

Как заставить элемент растягиваться на ту же высоту, что и его контейнер?

0

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

Предпосылки:

.Wrap является переменной по высоте и не может иметь заданную height.
.Head должен быть фиксированной высотой.
.Body должен стать sccrollable, когда он больше по высоте, чем его контейнер (.Wrap)

План здесь состоит в том, чтобы сделать .Body растягиваться, чтобы он соответствовал .Wrap вызывающий overflow для запуска.

CURRENT CSS

.Wrap{
    position:fixed;
    top:10%;
    left:10%;
    display:flex wrap;
    align-items:stretch;
    max-height:50%;
    max-width:50%;
    overflow:hidden;
}
.Head{
    height:50px;
    width:100%;
}
.Body{
    overflow:auto;
}

http://jsfiddle.net/x6TaR/2

DreamTeK 08 май 2014, в 13:53

Источник

Теги:

html

css

css3

stretch

fluid-layout

2 ответа

0

Тело должно иметь определенную высоту. Проверьте эту скрипку.

.Body{
    background:#555;
    overflow:auto;
    height: 150px;
}

qtgye 08 май 2014, в 08:53

0

Определенная высота не может быть указана. Контейнеры являются переменными. Если бы я мог установить высоту, проблема была бы легкой.
DreamTeK 08 май 2014, в 11:35
0

вам, возможно, придется использовать jquery для вычисления максимальной высоты .Body.
qtgye 08 май 2014, в 11:41
0

Спасибо за это. Я надеялся избежать этого. Я уверен, что это возможно при использовании новой модели flexbox.
DreamTeK 08 май 2014, в 11:44

Показать ещё 1 комментарий

Ещё вопросы

Определенная высота не может быть указана. Контейнеры являются переменными. Если бы я мог установить высоту, проблема была бы легкой.
вам, возможно, придется использовать jquery для вычисления максимальной высоты .Body.
Спасибо за это. Я надеялся избежать этого. Я уверен, что это возможно при использовании новой модели flexbox.

Terry · Accepted Answer · 2014-05-09T05-46-00.000Z

Вы можете попробовать указать min-height для .Head (чтобы предотвратить принудительное сгибание flexbox) и установить свойство flex-flow родительского элемента .Wrap для column nowrap:

.Wrap{
    position:fixed;
    top:10%;
    left:10%;
    display:flex;
    flex-flow: column nowrap;
    align-items:stretch;
    background:#ddd;
    max-height:50%;
    max-width:50%;
    padding:10px;
    overflow:hidden;
}
.Head{
    background:#e00;
    height:50px;
    min-height: 50px;
    width:100%;
}

http://jsfiddle.net/x6TaR/6/

Вы знаете, как долго я возился с этим, чтобы заставить его работать? Твой гениальный брат. Спасибо.