HTML/CSS新手求助：如何让左侧灰色列高度铺满页面？

你是HTML/CSS新手，修改下载的模板时遇到左侧灰色列（侧边栏）无法铺满页面高度的问题，模板里的自动文本脚本和代码结构让你摸不着头绪，查了类似问题但代码结构不匹配。你的代码如下：

CSS代码 #

body {
  margin: 0;
  padding: font-family: "Comic Sans MS", "Comic Sans", cursive;
  line-height: 1.5em;
}

main {
  padding-bottom: 10010px;
  margin-bottom: -10000px;
  float: left;
  width: 100%;
}

#nav {
  float: left;
  width: 230px;
  margin-left: -100%;
  padding-bottom: 10010px;
  margin-bottom: -10000px;
  background: #eee;
}

#wrapper {
  overflow: hidden;
}

#content {
  margin-left: 230px;
  /* Same as 'nav' width */
}

.innertube {
  margin: 15px;
  /* Padding for content */
  margin-top: 0;
}

p {
  color: #555;
}

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

nav ul a {
  color: darkgreen;
  text-decoration: none;
}

HTML代码 #

<body>
  <div id="wrapper">
    <main>
      <div id="content">
        <div class="innertube">
          <h1>Heading</h1>
          <p>
            <script>
              generateText(30)
            </script>
          </p>
        </div>
      </div>
    </main>
    <nav id="nav">
      <div class="innertube">
        <h3>Left heading</h3>
        <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
          <li><a href="#">Link 5</a></li>
          <nav id="nav">
        </ul>
      </div>
      </nav>
  </div>
</body>

解决方法 #

一、修复现有代码的问题 #

你的代码里有几个小错误导致高度异常，修正后即可解决：

1. CSS语法错误：body里的padding: font-family...写法错误，删掉多余的padding:，或者给padding设置具体值（比如padding: 0;）
2. HTML标签嵌套错误：<ul>里多了一个未闭合的<nav id="nav">，直接删除这个多余标签
3. 高度铺满补充：给html和body设置height: 100%;，再给#wrapper加上min-height: 100vh;，确保父容器高度足够

修改后的代码：

修正后的CSS

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  line-height: 1.5em;
}

main {
  padding-bottom: 10010px;
  margin-bottom: -10000px;
  float: left;
  width: 100%;
}

#nav {
  float: left;
  width: 230px;
  margin-left: -100%;
  padding-bottom: 10010px;
  margin-bottom: -10000px;
  background: #eee;
}

#wrapper {
  overflow: hidden;
  min-height: 100vh;
}

#content {
  margin-left: 230px;
}

.innertube {
  margin: 15px;
  margin-top: 0;
}

p {
  color: #555;
}

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

nav ul a {
  color: darkgreen;
  text-decoration: none;
}

修正后的HTML

<body>
  <div id="wrapper">
    <main>
      <div id="content">
        <div class="innertube">
          <h1>Heading</h1>
          <p>
            <script>
              generateText(30)
            </script>
          </p>
        </div>
      </div>
    </main>
    <nav id="nav">
      <div class="innertube">
        <h3>Left heading</h3>
        <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
          <li><a href="#">Link 5</a></li>
        </ul>
      </div>
    </nav>
  </div>
</body>

二、用Flexbox简化代码（推荐） #

原来的代码用的是老派的负margin浮动布局，逻辑复杂且容易出问题。现在用Flexbox可以彻底简化代码，更易维护，还能自动实现高度铺满：

简化后的CSS

html, body {
  margin: 0;
  padding: 0;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  line-height: 1.5em;
}

#wrapper {
  display: flex;
  min-height: 100vh;
}

#nav {
  width: 230px;
  background: #eee;
}

#content {
  flex: 1; /* 让内容区自动占满剩余空间 */
}

.innertube {
  margin: 15px;
  margin-top: 0;
}

p {
  color: #555;
}

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

nav ul a {
  color: darkgreen;
  text-decoration: none;
}

简化后的HTML

<body>
  <div id="wrapper">
    <nav id="nav">
      <div class="innertube">
        <h3>Left heading</h3>
        <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
          <li><a href="#">Link 5</a></li>
        </ul>
      </div>
    </nav>
    <main id="content">
      <div class="innertube">
        <h1>Heading</h1>
        <p>
          <script>
            generateText(30)
          </script>
        </p>
      </div>
    </main>
  </div>
</body>

这个方案用display: flex实现侧边栏和内容区的并排布局，min-height: 100vh确保容器至少占满视口高度，侧边栏固定宽度，内容区自动填充剩余空间，完全不需要复杂的负margin和浮动，代码结构清晰，也不会出现高度适配问题。

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