Установка высоты div в процентах

Я хочу изменить размер гибкий контейнер, используя процентные единицы, например height: 10%, но он подходит только для содержаниеheight. Если я попробую использовать px, он сработает, но мне определенно понадобится проценты.

.top_section {
  display: flex;
  height: 10%;
  background-color: #8ac858;
}

<div class = "top_section">
  <div class = "nav menu">
    <a href = "#" class = "nav_unit">Home</a>
    <a href = "#" class = "nav_unit">Rating</a>
    <a href = "#" class = "nav_unit">Map</a>
  </div>
  <div class = "auth_menu">
    <a href = "#" class = "auth_text">Register</a>
    <a href = "#" class = "auth_text">Login</a>
    <input type = "text" class = "login">
    <input type = "password" class = "password">
  </div>
</div>

Что мне делать в этом случае?

.top_section имеет height: 10%. Таким образом, высота .top_section будет равна 10% его родительского элемента. Итак, вам нужно установить высоту его родительского элемента. Это действительно не связано с flexbox

— 12.12.2018 18:22

Родительский элемент @vmoh_ir - <body>

— 12.12.2018 18:57

Итак, вы можете получить body: { height: 100vh; }

— 12.12.2018 18:58

html css flexbox

12.12.2018 18:08

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

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

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

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

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

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

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

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...