画面の高さを指定せずにdivを縦に並べるにはどうすればいいですか？

Question

私は水平方向と垂直方向に並べられたスライダーを構築しようとしています。 私はこのコードでdisplay: flex;使用しています：私はdiv要素は画面の中央になりたいが、身体に一定の高さを与えることなく、このために動作していないよう

body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100%; 
 
}

<div id="slider"> 
 

 
    the content 
 

 
</div>

を私。 height: 100vh;を使用する必要がありますか、はるかに優れたソリューションがありますか？

Answer 1

height: 100%をhtmlに設定する必要があります。

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100%; 
 
}

<div id="slider"> 
 
    the content 
 
</div>

Answer 2

ボディフレックスをしないでください。代わりにコンテナを使用してください：

.container { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    height: 100%; 
    /*or use height:100vh;*/ 
} 



<div class="container"> 
    <div id="slider"> 

     the content 

    </div> 
    </div>