内容在导航（菜单栏）下方流动：响应式网站

Question

我决定上传我的响应式网站，但我注意到内容（在本例中为虚拟文本）并未保留在导航菜单下方。

( http://www.azhir.co.uk/web_zip/default.html )

如您所见，它是基本的 css 样式，我使用 css 样式来创建汉堡包菜单栏。

html, body {
          margin: 0;
          padding: 0;
          width: 100%;
    }

    body {
          font-family: "Helvetica Neue",sans-serif;
          font-weight: lighter;
    }

    header {
          width: 100%;
          height: 0.01vh;
          background-color: red;
    }

    .content {
          width: 94%;
          margin: 4em auto;
          font-size: 20px;
          line-height: 30px;
          text-align: justify;
    }

    .logo {
          line-height: 60px;
          position: fixed;
          float: left;
          margin: 16px 46px;
          color: black;
          font-weight: bold;
          font-size: 20px;
          letter-spacing: 2px;
    }

    nav {
          position: fixed;
          width: 100%;
          line-height: 60px;
    }

    nav ul {
          line-height: 60px;
          list-style: none;
          background: rgba(0, 0, 0, 0);   /*transparency rgba(0,0,0,0)*/
          overflow: hidden;
          color: #fff;
          padding: 0;
          text-align: right;
          margin: 0;
          padding-right: 40px;
          transition: 1s;
    }

    nav.black ul {
          background: white;  /*changes color of bar*/
    }

    nav ul li {
          display: inline-block;
          padding: 16px 40px;;
    }

    nav ul li a {
          text-decoration: none;
          color: black;
          font-weight: bold;
          font-size: 16px;
    }

    .menu-icon {
          line-height: 60px;
          width: 100%;
          background: white; /*changes hamburger color*/
          text-align: right;
          box-sizing: border-box;
          padding: 15px 24px;
          cursor: pointer;
          color: black;
          display: none;
    }

    @media(max-width: 786px) {

          .logo {
                position: fixed;
                top: 0;
                margin-top: 16px;
          }

          nav ul {
                max-height: 0px;
                background: white; /*mobile color*/
          }

          nav.black ul {
                background: white;
          }

          .showing {
                max-height: 34em;
          }

          nav ul li {
                box-sizing: border-box;
                width: 100%;
                padding: 24px;
                text-align: center;
          }

          .menu-icon {
                display: block;
          }

    }

这是我 menu.css

的 css

body{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: white;
}

a{
  color: black;
}

.header{
  background-color: white;
  box-shadow:1px 1px 4px 0 rgba(0,0,0,.1);
  position:fixed;
  width:100%;
  z-index:3;
}

.header ul{
  margin:0;
  padding:0;
  list-style:none;
  overflow:hidden;
  background-color:white;
}

.header ul a{
  display:block;
  padding:20px;
  boder-right:1px solid grey;
  text-decoration: none;
}

.header ul a:hover{
  background-color: #e6e6e6;
}



.header .logo{
  float:left;
  display:block;
  font-size: 2em;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
}

.header .menu{
  clear:both;
  max-height:0;
  transition:max-height .2s ease-out;
}

/*hamburger*/

.header .menu-icon{
  padding: 28px 20px;
  position: relative;
  float:right;
  cursor:pointer;
}


.header .menu-icon .nav-icon{
  background:black;
  display: block;
  height:2px;
  width:18px;
  position:relative;
  transition: background .2s ease-out;
}

.header .menu-icon .nav-icon:before{
  background:black;
  content:"";
  display:block;
  height:100%;
  width:100%;
  position:absolute;
  transition: all .2s ease-out;
  top:5px;
}

.header .menu-icon .nav-icon:after{
  background:black;
  content:"";
  display:block;
  height:100%;
  width:100%;
  position:absolute;
  transition: all .2s ease-out;
  top:-5px;
}

.header .menu-btn{
  display: none;
}

.header .menu-btn:checked ~ .menu{
  max-height:240px;
}

.header .menu-btn:checked ~ .menu-icon .nav-icon{
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .nav-icon:before{
  transform: rotate(-45deg);
  top:0;
}

.header .menu-btn:checked ~ .menu-icon .nav-icon:after{
  transform: rotate(45deg);
  top:0;
}

@media (min-width:48em){
  .header li{
    float:left;
  }
  .header li a{
    padding:20px 30px;
  }

  .header .menu{
    clear:none;
    float:right;
    max-height: none;
  }

  .header .menu-icon{
    display:none;
  }

  .header .logo{
    float:left;
    display:block;
    font-size: 2em;
    padding: 10px 8%;
    text-align: center;
    text-decoration: none;
  }

}

/*content*/
.content {
  width: 85%;
  font-size: 20px;
  line-height: 30px;
  text-align: inherit;
  margin-left:  auto;
  margin-right: auto;
}

并且 html 代码非常基本且公正；

<html>
  <head>
    <link rel="stylesheet" href="css/menu.css">
  </head>

  <body>
    <header class="header">
      <a href="/" class="logo">Azhir Mahmood</a>
      <input class="menu-btn" type="checkbox" id="menu-btn"/>
      <label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
      <ul class="menu">
        <li><a href="#ALPHA">ALPHA</a></li>
        <li><a href="#BETA">BETA</a></li>
        <li><a href="#GAMMA">GAMMA</a></li>
      </ul>
    </header>

    <div class="content">
          <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </p>
          <p>

  </body>
</html>

Answer 1

欢迎来到 SO！

在 .content CLass

上设置 padding-top: 58px

为什么

因为你 header 的高度是 58px 是 fixed 所以它留下它的 space.. 为了覆盖它你需要填充等于 [的高度=29=]。此修复已完成，我们使用 header fixed、absolute、sticky(No DOM space)

内容在导航（菜单栏）下方流动：响应式网站

Content flows below Navigation (menubar): responsive website

html

css

navigation

menu