如何调整高度？

Question

我只想放在一边可以达到页脚，而我将旁边的高度设置为100％，但似乎什么都没发生。 我的css：

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

我的页面就像：

那么，如何让灰色到达页脚？

Answer 1

您可以使用弹性布局来设置页面样式。 页面上的所有内容都可以位于Flex容器<div id="flex-outer">

中

该容器使用flex-direction: column;属性将其内容保存为3列（标题，容器和页脚）。使用height: 100vh;，我们会将页面填满屏幕。

<div id="container">是另一个灵活容器本身，它包含您的内容和侧边栏。 此容器必须填充页面的垂直空间（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;
}
		

<div id="flex-outer">

	<header>This is the header</header>

	<div id="container"> 

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

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

	</div>

	<footer>This is the footer</footer>

</div>