Задать вопрос
edkiimrgnl
@edkiimrgnl
человек с невидимыми талантами.
html

Почему не отображается элемент с 100% высотой/шириной?

помогите,
не понимаю, почему не появляются элементы...
да, ужасно глупо..

вот стиль: 
body {
    margin: 0;
}

.main-container {
    display: flex;
    flex-flow: row wrap;
    min-width: 1600px;
    min-height: 1600px;
}

.header {
    width: 40%;
    height: 100%;
    background-color: #1e2327;
}

.main {
    background-color: #e9a904;
    width: 60%;
    height: 100%;
}


вот корпус:
<body>
    <div class="main-container">
        <header class="header">
            <nav class="nav">
                
            </nav>
        </header>
        <main class="main">

        </main>
    </div>
</body>
</html>
  • Вопрос задан
  • 165 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Это из раздяда, "хотите фокус покажу?"
Уберите height: 100%; у .header, все будет хорошо.

Почему так происходит:
С шириной браузеру всё более или менее понятно.
А вот высота зависит от контента.
Вы дочернему элементу говорите "стань высотой в 100% родителя", а родителю говорите "растянись по высоте дочернего". Браузер не понимает что же ему делать и что от чего считать.
Т.е. высоту дочернего можно указать в %, если у родителя есть указанная в явном виде высота (не важно в каких единицах измерения).
Можно для html указать высоту в % и они будут считаться от высоты вьюпорта (а её браузер знает, она четкая и понятная) и дальше передавать ее дочерним.

С флексами все проще. Для них по умолчанию align-items stretch, т.е. элементы растягиваются вдоль поперечной оси (по вертикали если главная ось идет по горизонтали (row)).
Если перестать указывать флек-элементам высоту, то они растянутся на всю высоту строки. У вас строка одна, значит на всю высоту родителя для которого у вас указана минимальная высота.

p.s. не вполне понятно, какую задачу вы пытаетесь решить, поставив рядом header и main.
Вообще, думаю, что вам нужны гриды и вот это Footer не опускается вниз страницы. Появляется скролл. Как это исправить?
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
fallus
@fallus
100% высота на обычных элементах (которые position: static или relative) работает только если у их родителя фиксированная высота.
Например height: 400px

Если вы ничего не поместили в этот элемент(кроме тэга с классом nav), то я так понимаю, что вы ожидаете, что .header должен быть растянут на всё свободное пространство.

Для этого советую задать такой стиль:
.main-container {
  display: flex;
  flex-direction: column; /* направление по вертикали (row — по горизонтали) */
  margin: 0 auto; /* блок располагается по центру (по горизонтали) */
  width: 100%;
  max-width: 1600px; /* Максимальная ширина */
  min-height: 100vh; /* минимальная высота - высота экрана */
}

.main-container > *{
  width: 100% /* иногда у потомков блоках с display: flex, ширина не 100%, поэтому на всяк стоит её выставить вручную */
}

.header {
  flex-grow: 1 /* Если flex-direction: column, то элемент растянется на всю свободную высоту; если flex-direction: row — ширину*/
}

.main {
  flex-grow: 1 /* Если flex-direction: column, то элемент растянется на всю свободную высоту; если flex-direction: row — ширину*/
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Нарисовать рекламный креатив для ios приложения
25 апр. 2024, в 12:26
10000 руб./за проект
Верстка
25 апр. 2024, в 12:23
2500 руб./за проект
ASO дизайн для ios приложения (Иконка+Скриншоты)
25 апр. 2024, в 12:21
10000 руб./за проект
Ещё заказы