侧边菜单应该是页面的高度

Question

我有一个侧面菜单，您可以在我的图片上看到。我希望它占据页面的整个高度，顶部缺少一点，页面底部缺少很多。我在这些区域周围添加了一个红色方块。我也在使用引导程序，但添加了一些 CSS。 我该如何解决这个问题？

.nav {
  background-color: #f2f2f2;
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}


ul {
  padding: 0;
  list-style: none;
  background: #f2f2f2;
}

  ul li {
    position: relative;
    line-height: 21px;
    text-align: left;
  }

    ul li a {
      display: block;
      padding: 8px 25px;
      color: #333;
      text-decoration: none;
    }

      ul li a:hover {
        color: #fff;
        background: #939393;
      }

    ul li ul.dropdown {
      min-width: 100%; /* Set width of the dropdown */
      background: #f2f2f2;
      display: none;
      position: absolute;
      z-index: 999;
      left: 0;
    }

    ul li:hover ul.dropdown {
      display: block; /* Display the dropdown */
    }

    ul li ul.dropdown li {
      display: block;
    }

.contract-menu {
  padding: 0px;
}

.active {
  color: #ffffff !important;
  background-color: #2772b2;
}

  <div class="row">
    <div class="col-3 contract-menu">
      <ul class="dropdown">
        <li>
          <a class="nav-link active" (click)="ShowDiv(0)"  *ngIf="currentStepId == 0">Overview</a>
          <a class="nav-link" (click)="ShowDiv(0)"  *ngIf="currentStepId != 0">Overview</a>
        </li>
        <li *ngFor="let step of steps">
          <a class="nav-link active" (click)="ShowDiv(step.stepId)" *ngIf="currentStepId == step.stepId">{{step.stepName}}</a>
          <a class="nav-link" (click)="ShowDiv(step.stepId)" *ngIf="currentStepId != step.stepId">{{step.stepName}}</a>
        </li>
      </ul>
    </div>

                                     SOME CODE HERE
                                          ...

</div>

更新

我现在可以让菜单占据高度的孔空间，正如您在我的图像上看到的那样。但是，我的菜单两侧仍有一些我不喜欢的白色。

这是我的更新 html

<div *ngIf="steps">
  <div class="contract-container">
    <div class="contract-menu menu">
      <ul class="dropdown">
        <li>
          <a class="nav-link active" (click)="ShowDiv(0)"  *ngIf="currentStepId == 0">Overview</a>
          <a class="nav-link" (click)="ShowDiv(0)"  *ngIf="currentStepId != 0">Overview</a>
        </li>
        <li *ngFor="let step of steps">
          <a class="nav-link active" (click)="ShowDiv(step.stepId)" *ngIf="currentStepId == step.stepId">{{step.stepName}}</a>
          <a class="nav-link" (click)="ShowDiv(step.stepId)" *ngIf="currentStepId != step.stepId">{{step.stepName}}</a>
        </li>
      </ul>
    </div>
    <div class="inner-page">
</div>
</div>

这是我的更新 CSS

.nav {
  background-color: #f2f2f2;
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}


ul {
  padding: 0;
  list-style: none;
  background: #f2f2f2;
}

  ul li {
    position: relative;
    line-height: 21px;
    text-align: left;
  }

    ul li a {
      display: block;
      padding: 8px 25px;
      color: #333;
      text-decoration: none;
    }

      ul li a:hover {
        color: #fff;
        background: #939393;
      }

    ul li ul.dropdown {
      min-width: 100%; /* Set width of the dropdown */
      background: #f2f2f2;
      display: none;
      position: absolute;
      z-index: 999;
      left: 0;
    }

    ul li:hover ul.dropdown {
      display: block; /* Display the dropdown */
    }

    ul li ul.dropdown li {
      display: block;
    }

.contract-menu {
  padding: 0px;
}

.active {
  color: #ffffff !important;
  background-color: #2772b2;
}


.contract-container {
  display: flex;
  padding: 0;
}

.menu {
  background-color: #f2f2f2;
  height: 100vh;
  width: 250px;
}

.inner-page {
  width: calc(100vw - 0px);
}

Answer 1

你可以这样做。

HTML

.container {
    display: flex;
    padding: 0;
}
.menu {
    border: 1px solid red;
    height: 100vh;
    width: 250px;
    background: #ccc;
}

.inner-page {
    border: 1px solid red;
    width: calc(100vw - 250px);
}

<div class="container">
        <div class="menu">
            <ul>
                <li><a href="#">Menu #1</a></li>
                <li><a href="#">Menu #2</a></li>
                <li><a href="#">Menu #3</a></li>
                <li><a href="#">Menu #4</a></li>
                <li><a href="#">Menu #5</a></li>
            </ul>
        </div>
        <div class="inner-page">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis quidem ex deserunt aut culpa quibusdam animi obcaecati consequuntur nobis nemo, eos fugit aliquam nulla modi dolore adipisci explicabo aspernatur nesciunt!
        </div>
    </div>