css - 下拉菜单底部空间

Question

我在网页设计方面没有那么丰富的经验，但已经将其整合在一起并且似乎可以正常工作。但是，我有一个小问题，我似乎无法弄清楚。

我创建了一个导航下拉菜单，在全屏 View 中，导航下拉菜单和页面标题之间有填充，但是当屏幕变小时，没有填充。这是什么原因造成的？？

请不要笑，这是我的 fiddle ，https://jsfiddle.net/ikeevens/m0njbhf4/这是我的代码。

h1 {
  margin: 0px;
  padding: 0px;
  color: #931d03;
  font-weight: 100;
  font-family: Arial;
  font-size: 20px;
  padding-bottom: 10px;
  margin: 0px auto;
}
h2 {
  margin: 0px;
  padding: 0px;
  color: #931d03;
  font-weight: 100;
  font: Arial;
  font-size: 16px;
  padding-bottom: 0px;
  margin: 0px auto;
}
h3 {
  color: #003564;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  padding: 0px auto;
  margin: 0px auto;
}
h4 {
  color: #842200;
  font-weight: 100;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 0px auto;
  margin: 0px auto;
}
h5 {
  margin: 0px;
  padding: 0px;
}
h6 {
  margin: 0px;
  padding: 0px;
}
p {
  margin: 0px auto;
  line-height: ;
  font-size: 12px;
}
sp {
  margin: 0px auto;
  line-height: ;
  font-size: 10px;
}
li {
  font-size: 12px;
}
* {
  padding: 0px auto;
  margin: 0px auto;
}
body {
  font-family: Helvetica, Arial, sans-serif;
  padding: 0px auto;
  margin: 0px auto;
  color: #555;
  background: #a6b17a;
  overflow-y: scroll;
}
img {
  max-width: 100%;
  height: auto;
  margin: 0px 0px 0px 0px;
}
#iefix {
  position: relative;
  z-index: 1000;
}
div.container {
  width: 85%;
  height: auto;
  background-color: ;
  margin: 0px auto;
  padding: 0px auto;
  -webkit-box-shadow: -1px 3px 10px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: -1px 3px 10px 0px rgba(0, 0, 0, 0.75);
  box-shadow: -1px 3px 10px 0px rgba(0, 0, 0, 0.75);
}
div.hsection-inner {
  margin: 0px auto;
  padding: 0px 0px;
}
div.header {
  background-image: ;
  background-color: ;
  padding: 0px auto;
  height: 120px;
}
div.menubar {
  background-image: ;
  background-color: black;
  height: 30px;
  padding-left: 0px;
}
.toggletop,
[id^=drop] {
  display: none;
}
.toggle,
[id^=drop] {
  display: none;
}
nav {
  margin: 0;
  padding: 0;
  background-color: #000;
  background-image: ;
  background-repeat: repeat-n;
  border-top: 0px solid black;
}
nav:after {
  content: "";
  display: table;
  clear: both;
}
nav ul {
  float: left;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}
nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  background-color: ;
}
nav a {
  display: block;
  padding: 0px 20px;
  color: #fff;
  font-size: 12px;
  line-height: 30px;
  text-decoration: none;
  background-color: ;
}
nav ul li ul li:hover {
  background: red;
  background-image: ;
}
nav ul li:hover {
  background-color: red;
  background-image: ;
}
nav li a:active {
  background-color: red;
  background-image: ;
}
nav ul ul {
  display: none;
  position: absolute;
  top: 30px;
}
nav ul li:hover > ul {
  display: inherit;
}
nav ul ul li {
  width: 205px;
  float: none;
  display: list-item;
  position: relative;
  background-color: #555;
  border-right: 1px solid black;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  margin-top: -1px;
  border-top: 1px solid black;
}
nav ul ul ul li {
  position: relative;
  top: -30px;
  left: 205px;
  background-color: #555;
}
nav li:last-child {} li > a:after {
  content: '';
}
li > a:only-child:after {
  content: '';
}
ul.menu {
  width: 100%;
}
div.body-content {
  padding: 20px 0px;
  background-color: rgb(255, 255, 255);
}
div.bsection-inner {
  margin: 0px auto;
  padding: 5px 75px;
}
div.section-inner {
  margin: 0px auto;
  padding: 0px 25px;
  max-width: 1100px;
}
div.footer {
  padding: 10px 10px;
  text-align: center;
  color: rgb(255, 255, 255);
  background-color: rgb(63, 63, 63);
  height: 75px;
}
div.fsection-inner {
  margin: 0px auto;
  padding: 0px 0px;
  max-width: 1100px;
}
.clearfix::before {
  display: table;
  content: "";
}
.clearfix::after {
  display: table;
  content: "";
}
.clearfix::after {
  clear: both;
}
.clearfix {}@media screen and (max-width: 1220px) {
  .toggle + a,
  .menu {
    display: none;
  }
  .toggle {
    display: block;
    background-color: #000;
    padding: 0px 20px;
    color: #FFF;
    font-size: 12px;
    line-height: 30px;
    text-decoration: none;
    border: none;
  }
  .toggletop {
    display: block;
    background-image: ;
    background-color: #000;
    padding: 0px 20px;
    color: #FFF;
    font-size: 12px;
    line-height: 30px;
    text-decoration: none;
    border: none;
  }
  .toggle:hover {
    background-color: red;
    background-image: ;
  }
  [id^=drop]:checked + ul {
    display: block;
    width: 100%;
  }
  nav a {
    font-size: 12px;
  }
  nav ul li {
    display: block;
    width: 100%;
    background-color: #000;
  }
  nav ul ul .toggle,
  nav ul ul a {
    padding: 0 40px;
  }
  nav ul ul ul a {
    padding: 0 80px;
  }
  nav a:hover,
  nav ul ul ul a {
    background-color: #555;
  }
  nav li:hover > a,
  #nav li a.active {
    background-color: red;
    background-image: ;
  }
  nav ul li ul li .toggle,
  nav ul ul a {
    background-color: #555;
  }
  nav ul ul {
    float: none;
    position: static;
    color: #ffffff;
  }
  nav ul ul li:hover > ul,
  nav ul li:hover > ul {
    display: none;
  }
  nav ul ul li {
    display: block;
    width: 100%;
    border-right: 0px solid black;
    border-left: 0px solid black;
    border-bottom: 0px solid black;
    border-top: 1px solid black;
  }
  nav ul ul ul li {
    position: static;
  }
  nav li:last-child {
    border-bottom: 0px solid black;
  }
  nav :hover {
    background: red;
    background-image: ;
  }
  div.menubar {
    padding-left: 0px;
  }
  div.bsection-inner {
    padding: 5px 75px;
  }
  .hide-mobile {
    display: none;
  }
}
@media screen and (max-width: 1020px) {
  .hide-mobile {
    display: none;
  }
}
@media screen and (max-width: 925px) {
  nav {
    display: block;
    padding: 0px 0px;
    color: #fff;
    font-size: 11px;
    line-height: 30px;
    text-decoration: none;
    background-color: ;
  }
  .hide-mobile {
    display: none;
  }
  div.mobile-collapse {
    width: auto;
    margin-right: 0px;
    float: none;
  }
  div.body-content {
    padding: 0px 10px;
  }
  div.bsection-inner {
    padding: 20px 50px;
  }
}
@media screen and (max-width: 860px) {
  .hide-mobile {
    display: none;
  }
  div.mobile-collapse {
    width: auto;
    margin-right: 0px;
    float: none;
  }
  div.body-content {
    padding: 0px 10px;
  }
  div.bsection-inner {
    padding: 20px 50px;
  }
}
@media screen and (max-width: 620px) {
  div.header {
    height: 100px;
  }
  p {
    font-size: 11px;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 13px;
  }
  div.menubar {
    padding-left: 0px;
  }
  div.body-content {
    padding: 0px 10px;
  }
  div.bsection-inner {
    padding: 20px 30px;
  }
  div.mobile-collapse2 {
    width: auto;
    margin-right: 0px;
    float: none;
  }
}
@media screen and (max-width: 500px) {
  div.header {
    height: 75px;
  }
  .toggle {
    line-height: 20px;
    font-size: 11px;
  }
  nav a {
    line-height: 20px;
    font-size: 11px;
  }
  .toggletop {
    font-size: 11px;
    line-height: 30px;
  }
  .list li a {
    font-size: 11px;
  }
  div.ftext {
    padding: 0px 10px;
    font-color: #fff;
    font-size: 10px;
    font: arial;
    font-weight: bold;
    line-height: 23px;
  }
  .toggle:hover {
    background-color: red;
    background-image: ;
  }
  nav li:hover > a,
  #nav li a.active {
    background-color: red;
    background-image: ;
  }
  #hnavbar ul li a {
    font-size: 9px;
    font-weight: ;
  }
  div.menubar {
    background-image: ;
    background-color: black;
    height: 25px;
    padding-left: 0px;
  }
  li {
    font-size: 11px;
  }
  .indent1 {
    margin-left: 10px;
  }
  .hide-mobile {
    display: none;
  }
  div.mobile-collapse {
    width: auto;
    margin-right: 0px;
    float: none;
  }
  div.body-content {
    padding: 0px 10px;
  }
  div.bsection-inner {
    padding: 20px 30px;
  }
}
@media screen and (max-width: 420px) {
  .toggletop {
    font-size: 11px;
    line-height: 30px;
    height: 30px;
  }
  div.body-content {
    padding: 0px 10px;
  }
  #hnavbar ul li a {
    font-size: 8px;
    font-weight: ;
  }
  div.bsection-inner {
    padding: 20px 20px;
  }
}

<!DOCTYPE HTML>

<HTML lang="en">

<HEAD>

  <META content="IE=11.0000" http-equiv="X-UA-Compatible">

  <META charset="utf-8">

  <META http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <TITLE>Responsive Webpage</TITLE>

  <META name="viewport" content="width=device-width,initial-scale=1">

  <META name="GENERATOR" content="MSHTML 11.00.9600.18212">




</HEAD>


<BODY>

  <DIV class="container">
    <!-- header -->
    <DIV class="header">
      <DIV class="hsection-inner">

      </DIV>
      <!--hsection-inner-->
    </DIV>
    <!--/header-->


    <!-- nav -->
    <DIV class="menubar" id="iefix">

      <nav>

        <label for="drop" class="toggletop">Menu</label>
        <input type="checkbox" id="drop" />
        <ul class="menu">
          <li><a href="index.html">Home</a>
          </li>
          <li>
            <!-- First Tier Drop Down -->
            <label for="drop-1" class="toggle">Services</label>
            <a href="">Services</a>
            <input type="checkbox" id="drop-1" />
            <ul>
              <li><a href="">Service 1</a>
              </li>
              <li><a href="">Service 2</a>
              </li>
              <li><a href="">Service 3</a>
              </li>
              <li><a href="">Service 4</a>
              </li>
              <li><a href="">Service 5</a>
              </li>
            </ul>
          </li>

          <li>
            <!-- First Tier Drop Down -->
            <label for="drop-2" class="toggle">Products</label>
            <a href="">Products</a>
            <input type="checkbox" id="drop-2" />
            <ul>
              <li><a href="">Product 1</a>
              </li>
              <li><a href="">Product 2</a>
              </li>
              <li><a href="">Product 3</a>
              </li>
              <li><a href="">Product 4</a>
              </li>
            </ul>
          </li>

          <li><a href="">Contact Us</a>
          </li>
          <li><a href="">Company Info</a>
          </li>

        </ul>

      </nav>

    </DIV>


    <!--/nav-->

    <!-- body-content -->
    <DIV class="body-content">
      <DIV class="bsection-inner">

        <h1>Page Title</h1>
        <hr>
      </DIV>
      <!--section-inner-->
    </DIV>
    <!--/body-content-->

    <!-- footer -->

    <DIV class="footer">
      <DIV class="fsection-inner">

      </DIV>
      <!--fsection-inner-->
    </DIV>
    <!--/footer-->


  </DIV>
  <!--/container-->

</BODY>

</HTML>

Answer 1

根据你提供的jsfiddle，你需要去掉div.menubar的30px高度。它应该看起来像这样:

div.menubar {
  background-image: ;
  background-color: black;
  padding-left: 0px;
}

解释:这样，如果下拉菜单处于事件状态，.body-content 就会知道菜单需要多少空间。通过将高度放在 div.menubar 上，您可以设置菜单的高度，而 .body-content 将占用所有剩余空间。

希望这对您有所帮助。