如何调整高度？

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>