FlexBox со 100% высотой

Мне нужен flexbox высотой 100% с нижним колонтитулом для детей с 50px. Возможно ли без калькуляции (100% - 50 пикселей)?

вот моя попытка:

body, html{
  height:100%;
}
.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color:red;
}

.flex-1 {
  background-color: yellow;
}

.flex-A {
    background-color: blue;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.flex-1-child {
    background-color: purple;
    overflow-y: auto;
    height: calc(100% - 50px);
}
.flex-2-child {
    background-color: green;
    height: 50px;
}

.text{
  height: 500px;
}

<div class = "container">
    <div class = "flex-1">test</div>
    <div class = "flex-A">
        <div class = "flex-1-child">
            <div class = "text">test2</div>
         </div>
        <div class = "flex-2-child">
            <div>test</div>
        </div>
    </div>
</div>

У меня нет стопроцентной высоты.

Спасибо за помощь.

Удалите overflow-y:auto, это то, что вы пытаетесь получить?

— 04.04.2018 09:02

Нет, это переполнение в порядке, но выход за пределы не должен происходить из-за 100% высоты.

— 04.04.2018 09:21

css flexbox

04.04.2018 08:57

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

559

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Измените height: calc(100% - 50px); на flex: 1;, и он максимально увеличит свою высоту.

Я думаю, это то, что ты хочешь? https://jsfiddle.net/shuding/3ss44wuk/1

Привет, спасибо за ответ, но почему у меня переполнение контейнера?

— 04.04.2018 09:18

@Spawnrad Это потому, что элемент .text имеет высоту 500 пикселей, а контейнер короче этого значения. Вы можете удалить 500px или заменить overflow-y: auto; на overflow-y: hidden;, чтобы избежать переполнения.

— 04.04.2018 09:27

Это переполнение нормально. У меня есть еще одно переполнение, кроме этого.

— 04.04.2018 09:29

@Spawnrad Понятно. Это вызвано полями элемента body. Добавление margin: 0; в body устранило это переполнение: jsfiddle.net/shuding/3ss44wuk/4

— 04.04.2018 09:42

04.04.2018 09:04

Просто используйте flex: 1 на динамическом элементе.

body, html{
  height:100%;
}
.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color:red;
}

.flex-1 {
  background-color: yellow;
}

.flex-A {
    background-color: blue;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.flex-1-child {
    background-color: purple;
    overflow-y: auto;
    flex: 1;
}
.flex-2-child {
    background-color: green;
    height: 50px;
}

.text{
  height: 500px;
}

<div class = "container">
    <div class = "flex-1">test</div>
    <div class = "flex-A">
        <div class = "flex-1-child">
            <div class = "text">test2</div>
         </div>
        <div class = "flex-2-child">
            <div>test</div>
        </div>
    </div>
</div>

Привет, спасибо за ответ. Как я могу установить контейнер на 100% высоту и не допустить переполнения?

— 04.04.2018 09:23

Уберите статическую высоту с .text. Вы устанавливаете его на 500, что выше его родительского элемента, поэтому родительский элемент получит полосу прокрутки.

— 04.04.2018 09:28

Это нормально. Родительская полоса прокрутки мне не нужна (контейнер высотой 100% без переполнения)

— 04.04.2018 09:30

04.04.2018 09:21