如何让导航栏（nav）动态延伸至不同高度页面底部？

我是HTML和CSS新手，希望实现导航栏（nav）动态延伸至每个页面的底部，但尝试使用height:auto、100%以及100vh均无法达成效果。期望效果为导航栏（示例图中红色区域）延伸至页面底部，以下是当前的HTML和CSS代码：

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Tip Toe Soles</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <header>
    <div>
      <h2>TipToe Soles</h2>
    </div>
  </header>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="products.html">Products</a></li>
      <li><a href="mens.html">Men's Shoes</a></li>
      <li><a href="womens.html">Women's Shoes</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="aboutus.html">About Us</a></li>
      <li><a href="feedback.html">Feedback</a></li>
      <li><a href="wishlist.html">Wishlist</a></li>
    </ul>
  </nav>
  <main>
    <div class="banner">
      <a href="index.html"><img src="images/banner2.png" alt="Welcome banner"></a>
    </div>
    <div class="shopButtons">
      <div class="shop-button">
        <a href="mens.html"><img src="images/shopmens.png" alt="Shop Men's Shoes button"></a>
      </div>
      <div class="shop-button">
        <a href="womens.html"><img src="images/shopwomens.png" alt="Shop Women's Shoes button"></a>
      </div>
    </div>
    <div class="margin4text">
      <h1>What is TipToe Soles?</h1>
      <p>Hey there! Welcome to TipToe Soles - your new favorite spot for comfy kicks that won't break the bank. Based in Sydney, Australia, we're all about bringing you shoes that feel as good as they look. Whether you're 30 or 100, our daily wear collection
        is designed for your comfort and style needs.</p>
    </div>
    <div class="banner">
      <a href="products.html"><img src="images/banner3.png" alt="latest arrivals banner"></a>
    </div>
    <h1 class="middletext">Check out our latest arrivals, introducing the Sallys and Heavenlys!</h1>
    <div class="shoesContainer1">
      <a href="sallyblacks.html">
        <div class="shoe-item"><img src="images/Sally_Black.png" alt="Sally Black womens shoes">
          <p>Sally Blacks</p>
        </div>
      </a>
      <a href="heavenlyblacks.html">
        <div class="shoe-item"><img src="images/Heavenly_Black.png" alt="Heavenly Black womens shoes">
          <p>Heavenly Blacks</p>
        </div>
      </a>
      <a href="sallytans.html">
        <div class="shoe-item"><img src="images/Sally_Tan.png" alt="Sally Tan womens shoes">
          <p>Sally Tans</p>
        </div>
      </a>
    </div>
  </main>

  <footer>
    <a href="returnpolicies.html">Return Policies</a> | <a href="exchangepolicies.html">Exchange Policies</a> | <a href="deliverypolicies.html">Delivery Policies</a><br><br> &copy; Tip Toe Soles 2024
  </footer>
</body>

</html>

CSS代码 #

* {
  padding: 0;
  margin: 0;
}

html {
  font-family: Arial, Helvetica, sans-serif;
}

body {
  padding: 0 10%;
  background-color: #fff;
  margin: 0;
}

header {
  display: flex;
  background-color: #2c2513;
  color: white;
  cursor: default;
}

header div:nth-child(1) {
  flex-grow: 1;
  margin-left: 2em;
  /* border: green solid 1px; */
}

header div:nth-child(2) {
  display: flex;
  flex-grow: 5;
  font-size: 200%;
  align-items: center;
  justify-content: center;
  /* border: red solid 1px */
}

header div:nth-child(3) {
  display: flex;
  flex-grow: 1;
  /* border: blue solid 1px; */
  align-items: end;
  justify-content: end;
  padding: 1em;
  max-width: 350px;
}

nav ul {
  overflow: hidden;
  list-style-type: none;
}

li a {
  text-decoration: none;
  display: block;
  font-size: 1.2em;
  padding: .5em;
  background-color: #ffda72;
  color: black;
  border-top: #2c2513 solid 1px;
}

nav {
  width: 15%;
  float: left;
  border: #2c2513 solid 1px;
  background-color: #bda666;
  box-sizing: border-box;
  height: 100%;
}

header img {
  width: 52%
}

main {
  background-color: #dbc077;
  margin-left: 15%;
  box-sizing: border-box;
  border: 1px #000 solid;
}

.smallbutton {
  width: 8%;
  margin: 0 0.2em;
  display: inline;
  transform: translate(-.5em, .2em)
}

.banner img,
.contactusbanner img {
  width: 100%;
}

.middletext {
  padding: 1em 0 0 1em;
}

.margin4text {
  margin: 3em;
  /* display: flex; */
}

.margin4text p {
  line-height: 1.5em;
  padding-top: 1em;
}

.shoesContainer1,
.shoesContainer2 {
  padding: 0em 1em 1em 1em;
  display: flex;
  flex-wrap: wrap;
}

.shoe-item {
  background-color: #fff;
  border: 1px solid #000;
  padding: 20px;
  margin: 1em;
  font-size: 30px;
  max-width: 300px;
  min-height: 0
}

footer {
  background-color: #dbc077;
  padding: 1em;
  border: 1px solid #000;
  font-size: 0.75em;
}

当前使用float:left布局导航栏和主内容，会导致父元素高度塌陷，导航栏的height:100%无法获取正确的参考高度。改用Flexbox布局可轻松实现导航栏动态延伸至页面底部的效果，具体修改步骤如下：

1. 调整body样式，设置为垂直方向的flex容器，确保至少占满视口高度：

body {
  padding: 0 10%;
  background-color: #fff;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

2. 新增容器包裹nav和main，用于横向排列两者：
   修改HTML，在header后添加<div class="content-wrapper">：

<header>
  <div>
    <h2>TipToe Soles</h2>
  </div>
</header>
<div class="content-wrapper">
  <nav>
    <!-- 原nav内容 -->
  </nav>
  <main>
    <!-- 原main内容 -->
  </main>
</div>
<footer>
  <!-- 原footer内容 -->
</footer>

给新增容器添加flex样式，让它占据header和footer之外的所有空间：

.content-wrapper {
  display: flex;
  flex: 1;
}

3. 修改nav和main的样式，移除float和margin，利用flex实现等高布局：

nav {
  width: 15%;
  border: #2c2513 solid 1px;
  background-color: #bda666;
  box-sizing: border-box;
  /* 移除float:left和height:100% */
}

main {
  background-color: #dbc077;
  flex: 1; /* 占据剩余空间 */
  box-sizing: border-box;
  border: 1px #000 solid;
  /* 移除margin-left:15% */
}

修改完成后，导航栏会自动与主内容区域等高，且随着页面内容变化动态延伸至页面底部，同时footer会始终固定在页面底部。

内容的提问来源于stack exchange，提问作者kekprod