Почему div не идет в полный рост?

Question

Я пытаюсь сделать боковую панель, которая является высотой всей страницы, она вложена в div, называемый main.

Код:

.main { 
 
    display: flex; 
 
    overflow-y: hidden; 
 
    } 
 
    
 
.sidebar { 
 
    height: 100%; 
 
    background: #212121; 
 
    } 
 

 
.navbar { 
 
    margin: 0; 
 
    padding: 0; 
 
    }

<div class="main"> 
 
    <div class="sidebar"> 
 
    <ul class="navbar"> 
 
     ... 
 
    </ul> 
 
    </div> 
 
</div>

The div по умолчанию до размера неупорядоченного списка, который является 200px; хотя я могу изменить его на другой размер, например "height: 500px", я не хочу этого делать из-за разных размеров экрана.

Есть ли способ сделать это без использования размеров точек обзора, что-то вроде height: 100%, но что на самом деле работает?

Answer 1

Если вы всегда хотите, чтобы ваш .main был полной высотой (и шириной) окна, вы можете установить его абсолютно и растянуть.

.main { 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    display: flex; 
    overflow-y: hidden; 
} 

Зависит от того, что вы ищете в отношении .main div.