绝对定位布局下如何让右侧导航栏高度与左侧内容栏保持一致

嘿，这个问题我之前也踩过坑！绝对定位在这里的bug在于，你设置的top:0; bottom:0;是相对于视口（或者说未被内容撑开的html/body），而不是左侧内容的实际高度。当左侧文本超出视口时，body的高度并不会自动跟着内容拉伸到超过视口，所以右侧栏自然就停在视口底部了。

下面给你两种解决方案，优先推荐第一种现代布局方式：

方案1：用Flexbox重构（最推荐） #

Flexbox是解决这类等高布局的绝佳方案，代码简洁且兼容性拉满，完全不用依赖容易出问题的绝对定位。你只需要把左右栏放进一个父容器，给父容器设置flex布局就行：

/* 父容器：用flex实现并排布局，确保至少占满视口高度 */
.container {
  display: flex;
  min-height: 100vh;
}

.left {
  width: 70%;
}
.left .leftc {
  background: red;
}

.right {
  width: 30%;
  background: green;
}

对应的HTML结构调整一下，把两个div放进容器：

<div class="container">
  <div class="left">
    <div class="leftc">
      ABC <!-- 这里放你的大量文本 -->
    </div>
  </div>
  <div class="right">
    <!-- 导航内容 -->
  </div>
</div>

这样不管左侧内容多长，右侧栏都会自动跟左侧等高，滚动时也会一起跟着页面走，完美符合你的需求。

方案2：修复绝对定位的问题（若必须保留绝对定位） #

如果你因为历史代码或其他原因必须用绝对定位，那需要先让html和body的高度能被内容撑开，然后给左右栏加一个相对定位的父容器，让右侧栏的高度跟随父容器：

/* 先让html和body能被内容撑开，同时确保至少占满视口 */
html, body {
  height: auto;
  min-height: 100vh;
  margin: 0; /* 去掉默认margin避免留白 */
}

/* 父容器设置相对定位，高度由左侧内容决定 */
.wrapper {
  position: relative;
  min-height: 100vh;
}

.left {
  width: 70%;
}
.left .leftc {
  background: red;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  min-height: 100%; /* 让右侧栏至少占满父容器高度 */
  background: green;
}

HTML结构调整：

<div class="wrapper">
  <div class="left">
    <div class="leftc">
      ABC <!-- 大量文本 -->
    </div>
  </div>
  <div class="right">
    <!-- 导航内容 -->
  </div>
</div>

这里的关键是让父容器.wrapper的高度由左侧内容撑开，同时给右侧栏设置min-height:100%，这样它就会跟着父容器的高度变化而拉伸了。

个人强烈推荐方案1，Flexbox的布局方式更直观，也更容易维护，绝对定位在这种场景下反而容易踩各种隐藏的坑。

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