divが完全な高さにならない理由

Question

私は、ページ全体の高さであるサイドバーを作成しようとしています。メインと呼ばれるdiv内にネストされています。

コードは：

.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>

200pxのある順不同リストのサイズにdivデフォルト。私は別のサイズ、例えば"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に関するものです。