Css 当顶栏使用像素时，如何让侧栏占据90%的页面？

我有一个难题，花了半个小时研究如何解决这个问题，但运气不好

如下图所示，图片左下角有一个小间隙。该间隙位于侧栏和页面底部之间。侧栏的高度百分比为90%，而顶栏的高度百分比为60px。我之所以在顶部栏中使用像素，是因为我不希望在垂直调整窗口大小时调整其大小。我在一个红色框中突出显示了问题，这是屏幕截图

HTML

注意：当窗口未处于全屏模式时，不会出现此问题

---

如果您有多余的时间：您觉得主题和我的CSS代码怎么样？可以改进吗？它好吗？

为什么不干脆100%填充顶部：60px内部？@Temaniaf如果我不明白你在说什么。我应该把100%放在哪里？我应该在哪里垫上60px？@OmarDajani您也可以将侧栏设置为

height
as
calc（100vh-60px）
我的意思是高度：边栏中100%，边栏中也有填充，这样可以保持顶部的空间bar@OmarDajani
calc
只计算括号内的表达式。这就是它所做的，所以不会有更多关于该部分的文档。关于
calc
的大部分页面都是关于它不能做什么，需要注意什么等。
<div class="wrapper">
      <div class="top-bar">
        <div class="left">
          <div class="title">
            <p>Cold Ops</p>
          </div>
        </div>
        <div class="right">

        </div>
      </div>
      <div class="side-bar">
        <div class="button">
          <div>
            <form action="http://google.com">
              <i class="fas fa-tachometer-alt fa-lg"></i>
              <input type="submit" value="Dashboard">
            </form>
          </div>
        </div>
        <div class="sub-title">
          <p>TOOLS</p>
        </div>
        <div class="button">
          <div>
            <form action="http://google.com">
              <i class="fas fa-ban fa-lg"></i>
              <input type="submit" value="Ban Panel">
            </form>
          </div>
        </div>
        <div class="button">
          <div>
            <form action="http://google.com">
              <i class="fas fa-exclamation-circle fa-lg"></i>
              <input type="submit" value="Warn Panel">
            </form>
          </div>
        </div>
        <div class="button">
          <div>
            <form action="http://google.com">
              <i class="fas fa-gift fa-lg"></i>
              <input type="submit" value="Gift Panel">
            </form>
          </div>
        </div>
        <div class="button">
          <div>
            <form action="http://google.com">
              <i class="fas fa-user fa-lg"></i>
              <input type="submit" value="User Info">
            </form>
          </div>
        </div>
        <div class="sub-title">
          <p>NEWS</p>
        </div>
        <div class="button">
          <div>
            <form action="http://google.com">
              <i class="fas fa-file fa-lg"></i>
              <input type="submit" value="New Post">
            </form>
          </div>
        </div>
        <div class="button">
          <div>
            <form action="http://google.com">
              <i class="fas fa-trash fa-lg"></i>
              <input type="submit" value="Remove Post">
            </form>
          </div>
        </div>
        <div class="sub-title">
          <p>OTHER</p>
        </div>
        <div class="button">
          <div>
            <form action="http://google.com">
              <i class="fas fa-chart-pie fa-lg"></i>
              <input type="submit" value="Game Statistics">
            </form>
          </div>
        </div>
      </div>
    </div>

body {
  margin: 0;
  padding: 0;

  background-color: #FAFAFA;
  font-family: sans-serif;
}

.wrapper {
  height: 100vh;
}

.top-bar {
  display: flex;

  width: 100%;
  height: 60px;
  background-color: white;
  box-shadow: 0 5px 5px -5px rgba(169,169,169,0.5);
}

.top-bar .left {
  flex: 2.195;
}

.top-bar .left .title {
  display: flex;
  justify-content: center;

  height: 100%;
}

.top-bar .left .title p {
  align-self: center;

  font-weight: lighter;
  font-size: 18px;
}

.top-bar .right {
  flex: 10;
  background-color: white;
}

.side-bar {
  display: flex;
  flex-direction: column;

  overflow: auto;

  width: 18%;
  margin-top: 1px;
  height: 89.9%;

  background-color: white;
  box-shadow: 3px 0 10px -5px rgba(169,169,169,0.5);
}

.side-bar > div:first-of-type {
  margin-top: 25px;
  margin-left: 12%;
}

.side-bar .button {
  position: relative;
  margin-left: 12%;
  margin-bottom: 3px;
}

.side-bar .button div {
  text-align: left;
}

.button form input {
  margin-left: 40px;
  background-color: Transparent;
  border: none;
  font-size: 14px;
}

.button form input:active {
  color: black;
}

.button form i {
  color: black;
  font-size: 16px;
  transition: 0.3s;
  position: absolute;
  left: 0px;
  top: 2.5px;
  padding: 5px 0px;
}

.button:hover form i {
  color: dodgerblue;
}

.sub-title {
  margin-top: 12px;
  margin-left: 12%;
}

.sub-title p {
  font-size: 13px;
  font-weight: bold;
  color: #7A8B92;
}