如何调整侧面高度？

Question

我只是想让aside可以到达页脚，并且我将aside的高度设置为100%，但似乎什么也没发生。 我的CSS：

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

我的页面是这样的：

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

Answer 1

您可以使用 flex 布局来设置页面样式。 页面上的所有内容都可以在 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>