Flex box 侧边菜单答案

【问题标题】：Flex box sticky side menuFlex box 侧边菜单
【发布时间】：2020-09-11 02:41:04
【问题描述】：

嗨，伙计，我正在为我的 freecodecamp 响应式网页设计项目制作投资组合我的主菜单部分的 100% 高度是我写的

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

nav,
ul,
#main-menu {}

.box {
  height: 100%;
  background: #DDD;
  width: 15%;
  display: flex;
  flex-direction: column;
}

.menu-item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center;
  border: 1px solid black;
}

<main>
  <section id="main-menu" class="menu">
    <nav>
      <ul class="box">
        <li class="menu-item"></li>
        <li class="menu-item"></li>
        <li class="menu-item"></li>
        <li class="menu-item"></li>
        <li class="menu-item"></li>
        <li class="menu-item"></li>
        <li class="menu-item"></li>
      </ul>
    </nav>
  </section>
  <section id="main"></section>
</main>

【问题讨论】：

标签： html css flexbox frontend

【解决方案1】：

使用min-height: 100vh;这会将元素的高度更改为可用视口的高度（页面中的可见区域）。检查下面的sn-p：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

nav,
ul,
#main-menu {
min-height: 100vh;
}

.box {
  height: 100%;
  background: #DDD;
  width: 15%;
  display: flex;
  flex-direction: column;
}

.menu-item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center;
  border: 1px solid black;
}

<main>
  <section id="main-menu" class="menu">
    <nav>
      <ul class="box">
        <li class="menu-item"></li>
        <li class="menu-item"></li>
        <li class="menu-item"></li>
        <li class="menu-item"></li>
        <li class="menu-item"></li>
        <li class="menu-item"></li>
        <li class="menu-item"></li>
      </ul>
    </nav>
  </section>
  <section id="main"></section>
</main>

【讨论】：