为什么展开后的折叠式导航菜单没有按下内容？

Question

我正在创建一个简单的flexbox导航菜单，并且在移动版本中展开时，折叠菜单不会降低内容。

这是我正在进行的实时演示：https://stackblitz.com/edit/bootstrap-nabar-snoyrg

.main-header {
  width: 100%;
  float: left;
  display: block;
  min-height: 100vh;
  height: 100%;
  background-size: cover;
  background-position: center;
  padding-bottom: 100px;
  background-color: gray;
}

.main-nav {
  margin-top: 100px;
  position: sticky;
  align-items: center;
  justify-content: space-around;
  top: 3em;
  left: 0;
  display: flex;
  height: 50px;
  width: 100%;
  color: white;
}
.main-nav__bars {
  color: white;
}
.main-nav__list {
  list-style: none;
  display: flex;
  color: white;
}
.main-nav__item {
  padding: 24px 27px;
  position: relative;
}
.main-nav__item:after {
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  content: "";
  display: block;
  float: left;
  background-color: #f5f5f5;
  width: 2px;
  height: 60px;
  -webkit-transform: rotate(20deg);
  transform: skew(155deg);
  position: absolute;
  right: 0;
  bottom: 6px;
}
.main-nav__item:last-child::after {
  content: "";
  width: 0px;
}
.main-nav__item:hover::after {
  width: calc(100% + 1px);
}
.main-nav__item:hover .main-nav__link {
  color: #444;
  position: relative;
  z-index: 3;
}
.main-nav__link {
  list-style: none;
  font-size: 1rem;
  color: #fff;
  font-family: "proxima-nova-n6", "proxima-nova";
  font-style: normal;
  font-weight: 600;
}
.main-nav__bars {
  display: none;
}

.main-banner {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.main-banner h2 {
  font-size: 3.75rem;
  line-height: 5.375rem;
  margin-bottom: 1.5rem;
  color: #fff;
  font-family: "proxima-nova-n4", "proxima-nova";
  font-style: normal;
  font-weight: 400;
  margin-top: 70px;
  font-weight: normal;
}
.main-banner p {
  font-size: 1.25rem;
  font-weight: normal;
  color: white;
  text-align: center;
  max-width: 700px;
  margin-bottom: 3.375rem;
  margin-right: auto;
  margin-left: auto;
}
.main-banner__green-button {
  height: 3.4375rem;
  background-color: #00964e;
  text-decoration: none;
  color: #fff;
  padding: 11px 13px;
  display: inline-block;
  box-sizing: border-box;
  line-height: 27px;
  border-radius: 30px;
  border: 3px solid #00964e;
  font-size: 1.125rem;
  padding-right: 50px;
  font-family: "proxima-nova-n6", "proxima-nova";
  font-style: normal;
  font-weight: 600;
  position: relative;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.main-banner__arrow-right::after {
  font-family: "icomoon";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  content: "" !important;
  font-size: 33px;
}
.main-banner__green-button::after {
  float: right;
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  margin-left: 10px;
  top: 10px;
  position: absolute;
  right: 10px;
}
.main-banner__green-button:hover {
  background-color: white;
  color: green;
}
.main-banner__arrow-down {
  transform: rotate(90deg);
  width: 34px;
  height: 34px;
  position: absolute;
  bottom: 100px;
  margin-left: -17px;
  left: 50%;
  z-index: 2;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  background-image: url("/assets/images/icon-arrow-right.png");
}

@media only screen and (max-width: 768px) {
  .main-nav {
    margin: 0;
    display: block;
    position: inherit;
  }

  .main-nav__list {
    margin-top: 20px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .main-nav__item:after {
    content: "";
    width: 1px;
  }

  .Navbar__ToggleShow {
    display: flex;
  }

  .main-nav__bars {
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
    margin-top: -120px;
    padding: 0px;
    font-size: 33px;
  }

  .main-banner__arrow-down {
    bottom: 17px;
  }
  .main-banner h2 {
    text-align: center;
    margin-top: 155px;
  }
}

<div class="main-header">
  <nav class="main-nav navbar" appSidebar #ref="appSidebar">
    <div class="main-nav__link">
      <img src="https://user-images.githubusercontent.com/263237/36633897-d3237f2e-19ad-11e8-960a-daaf5ca3088a.png">
    </div>
    <div class="main-nav__toggle">
      <i class="main-nav__bars fa fa-bars"></i>
    </div>
    <ul class="main-nav__list" [ngClass]="ref.click === true? 'Navbar__ToggleShow' :''">
      <li class="main-nav__item">
        <a class="main-nav__link" href="#">Home</a>
      </li>
      <li class="main-nav__item">
        <a class="main-nav__link" href="#">About us</a>
      </li>
      <li class="main-nav__item">
        <a class="main-nav__link" href="#">What we do</a>
      </li>
      <li class="main-nav__item">
        <a class="main-nav__link " href="#">Projects</a>
      </li>
      <li class="main-nav__item">
        <a class="main-nav__link " href="#">Contact</a>
      </li>
    </ul>
  </nav>

  <div class="main-banner">
    <h2>We are a team of
      <strong>experts</strong>.</h2>
    <p>Founded in 2007, the demila specializes in IT personnel outsourcing for the areas of banking, insurance, telecommunications,
      high-tech, pharmacy, logistics and many others</p>
    <a href="http://en.astek.pl/about-us/" class="main-banner__green-button main-banner__arrow-right">Read more
      <i></i>
    </a>
    <a href="#" class="main-banner__arrow-down"></a>
  </div>
</div>

<div class="container">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel lobortis est. In felis erat, dignissim sed molestie sed,
  dictum sit amet purus. Nulla ultrices rutrum maximus. Aenean hendrerit, nisl sit amet sagittis viverra, tellus erat euismod
  risus, egestas elementum nibh eros sed ante. Donec imperdiet convallis dui, et semper justo venenatis non. Vestibulum a
  tincidunt sem, non bibendum nunc. Nam tincidunt sed lectus condimentum luctus. Fusce ut blandit lacus. In maximus libero
  vitae velit consequat lobortis. Ut pellentesque, neque ut interdum consectetur, dui dui posuere nulla, sit amet luctus
  nibh augue sed justo. Sed quis gravida leo. Sed cursus erat arcu, eget accumsan orci consequat sed. Phasellus quis dui
</div>

我的代码怎么了？

Answer 1

从height: 50px中删除.main-nav将使内容适当扩展并下推随后的所有内容。