如何調整高度？

Question

我只是想放在一邊可以到達頁腳，並且我把高度放在一邊爲100％，但似乎什麼也沒有發生。 我的CSS：

aside { 
    width: 30%; 
    float: right; 
    background-color: #eee; 
    padding: 1%; 
    height: 100%; 
} 

我的網頁是這樣的：

那麼，如何讓灰色一旁達到頁腳？

Answer 1

您可能會使用柔性佈局來設置頁面的樣式。在頁面上 一切都可以是柔性容器<div id="flex-outer">

該容器保持它作爲使用flex-direction: column;財產3列（頭，集裝箱和頁腳）裏面的內容。用height: 100vh;我們讓頁面填滿屏幕。

<div id="container">是另一個Flex容器本身，它包含您的內容和側邊欄。 該容器必須填充頁面的垂直空間（flex-grow: 1;），以使頁腳保持在底部，並且側邊欄具有100％的高度。你也可能希望你的邊欄保持其寬度（flex-shrink: 0;）和內容填充寬度的其餘部分（flex-grow: 1;）。

body { 
 
    margin: 0; 
 
} 
 

 
#flex-outer { 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
header { 
 
    height: 150px; 
 
    background-color: #E6E6E6; 
 
} 
 

 
#container { 
 
    display: flex; 
 
    background-color: pink; 
 
    flex-grow: 1; 
 
} 
 

 
.content { 
 
    flex-grow: 1; 
 
} 
 

 
aside { 
 
    background-color: grey; 
 
    width: 300px; 
 
    flex-shrink: 0; 
 
} 
 

 
footer { 
 
    background-color: cyan; 
 
    height: 50px; 
 
} 
 
\t \t

<div id="flex-outer"> 
 

 
\t <header>This is the header</header> 
 

 
\t <div id="container"> 
 

 
\t \t <div class="content"> 
 
\t \t <p>This is the content</p> 
 
\t \t </div> 
 

 
\t \t <aside> 
 
\t \t <ul> 
 
\t \t  <li>Categories</li> 
 
\t \t  <li>Links</li> 
 
\t \t  <li>etc...</li> 
 
\t \t </ul> 
 
\t \t </aside> 
 

 
\t </div> 
 

 
\t <footer>This is the footer</footer> 
 

 
</div>