バーチャルサイドバーを動的に調整してブラウザのヘッダーとボトムの間で自動的に調整する方法

Question

以下のコードは、メニュー項目をブラウザーウィンドウに対して垂直方向に自動調整しますが、ヘッダーを考慮しません。ヘッダーとブラウザーの下部の間のサイドバーをどのように垂直に整列させることができますか。現在、下の項目はブラウザの下に表示されています。

HTML：

<h1> 
Header 
</h1> 
<div class="sidebar"> 
    <ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    <li>Item 7</li> 
    </ul> 
</div> 

CSS：

.sidebar{ 
    background-color: orange; 
    margin-left: 30px; 
    height: 100vh; 
    position: fixed; 
    top: 0px; 
} 

.sidebar ul{ 
    height: 100%; 
    list-style-type: none; 
    padding: 0px 15px 0px 15px; 
    margin:0px; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-around; 
} 

Answer 1

は、私が使用して終了するものです。

HTML：

<h1> 
Header 
</h1> 
    <section> 
    <div class="sidebar"> 
     <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     <li>Item 5</li> 
     <li>Item 6</li> 
     <li>Item 7</li> 
     </ul> 
    </div> 
    <main> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    <p>main content</p> 
    </main> 
</section> 

CSS：

body { 
    display: flex; 
    height: 100vh; 
} 
section { 
    display: flex; 
    flex-grow: 1; 
} 
main { 
    background: #eee; 
    position: absolute; 
} 
body, .sidebar, .sidebar ul { 
    display: flex; 
    flex-direction: column; 
} 
.sidebar ul { 
    flex-grow: 1; 
} 
.sidebar{ 
    background-color: orange; 
} 
.sidebar ul{ 
    list-style-type: none; 
    padding: 0px 15px 0px 15px; 
    margin:0px; 
    justify-content: space-around; 
} 

Answer 2

あなたは別のフレキシボックスにヘッダーやサイドバーをラップすることができます。ここで This is the example

HTML

<div class="flex"> 
    <h1> 
    Header 
    </h1> 
    <div class="sidebar"> 
     <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     <li>Item 5</li> 
     <li>Item 6</li> 
     <li>Item 7</li> 
     </ul> 
    </div> 
</div> 

CSS

.flex{ 
    flex-direction: column; 
} 
.sidebar{ 
    flex:1; 
    display:inline-block; 
    background-color: orange; 
    margin-left: 30px; 
    height: 100vh; 
    top: 0px; 
} 

.sidebar ul{ 
    height: 100%; 
    list-style-type: none; 
    padding: 0px 15px 0px 15px; 
    margin:0px; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-around; 
}