html - 为什么我折叠的导航菜单在展开时没有将内容向下推？

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

从 .main-nav 中删除 height: 50px 将允许内容适当扩展并下推任何后续内容。