导航栏无法铺满右侧垂直区域，寻求CSS调整方案

我看了你当前的代码和效果，问题出在导航栏用了浮动布局，它的高度只会由里面的链接内容撑开，没法自动铺满右侧的垂直区域。咱们可以用Flex布局来轻松解决这个问题，调整步骤如下：

核心修改思路 #

把整个#wrapper改成Flex容器，通过Flex的换行和空间分配特性，让头部(header)和底部(footer)占满整行，导航栏(nav)固定宽度并垂直铺满，主内容区(main)自动填充剩余空间。

具体CSS修改 #

替换你原来的CSS代码为下面的版本，关键修改点我已经标注出来了：

body {
  background-color: #010d91;
  margin: 0;
  padding: 0; /* 新增，消除默认内边距 */
}

#wrapper {
  width: 80%;
  margin: 0 auto;
  background-color: white;
  color: black;
  display: flex; /* 启用Flex布局 */
  flex-wrap: wrap; /* 允许子元素换行 */
  min-height: 100vh; /* 让容器至少占满视口高度 */
}

h1 {
  font-size: 50px;
  text-align: center;
}

header {
  background-color: #5995f7;
  padding: 10px; /* 简化padding写法 */
  flex: 0 0 100%; /* 强制占满整行 */
}

nav {
  /* 去掉原来的float: right; */
  width: 150px;
  font-weight: bold;
  letter-spacing: 0.1em;
  flex: 0 0 150px; /* 固定宽度，不拉伸不收缩 */
  background-color: #89c6ed; /* 把背景色移到nav上，铺满整个侧边栏 */
}

main {
  padding:10px 20px;
  color: #000000;
  flex-grow: 1; /* 自动填充剩余空间 */
}

h2 {
  color: #869dc7;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav a {
  text-decoration: none;
  padding: 20px 10px; /* 调整内边距，让链接更美观 */
  display: block;
  border-bottom: 1px solid #FFFFFF;
  /* 去掉原来的background-color，因为nav已经设置了背景 */
}

nav a:link { color:#ffffff }
nav a:visited { color: #eaeaea; }
nav a:hover { color: #869dc7; background-color: #eaeaea; }

footer {
  text-align: center;
  font-style: italic;
  font-size: small;
  padding: 5px 0; /* 简化padding写法 */
  background-color: #5995f7;
  flex: 0 0 100%; /* 强制占满整行 */
}

修改说明 #

1. Flex布局容器：#wrapper设置display: flex和flex-wrap: wrap，让子元素可以按行排列并自动换行
2. 垂直铺满视口：min-height: 100vh确保容器高度至少和浏览器窗口一样高，导航栏自然会延伸到底部
3. 元素宽度分配：header和footer用flex: 0 0 100%强制占满整行；nav固定150px宽度；main用flex-grow:1自动填充剩下的空间
4. 背景色优化：把导航栏的背景色从a标签移到nav元素上，这样整个侧边栏区域都会是统一的背景色，而不是只有链接区域有颜色

这样修改后，导航栏就会像你期望的那样，从header下方一直延伸到footer上方，铺满页面右侧的全部垂直区域啦！

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