分隔导航栏和主要HTML部分

时间：2020-02-05 20:44:21

标签： html layout

问题

我有一个网页布局，其中包含header，navbar和main部分，以及折叠的sidebar。我正在针对移动查看进行优化，但是我无法将main部分和navbar分开。看来navbar当前已定位，使其与main section重叠。

问题

为什么两个部分重叠？

HTML代码 

<!DOCTYPE html>
<html lang="en" dir="ltr">
<meta content="width=device-width, height=device-height, initial-scale=1.0, shrink-to-fit=no" charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="responsive2.css">
 <title>Saltwx</title>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script src="https://saltwx.com/scripts/saltwx.js"></script>

    <!-- API scripts need to be called last -->
      <!--<script src="https://saltwx.com/files/scripts/worldweather.js"></script>-->
      <script>
        displayMap();
        google.maps.event.addDomListener(window, 'load', init);

      </script>

      <script>
      /* Set the width of the sidebar to 250px (show it) */
  function openNav() {
    document.getElementById("mySidepanel").style.width = "55%";
  }

  /* Set the width of the sidebar to 0 (hide it) */
  function closeNav() {
    document.getElementById("mySidepanel").style.width = "0";
  }
  </script>


  </head>
  <body>
    <!-- Simulate a smartphone / tablet look -->
    <header>
    <div id="mySidepanel" class="sidepanel">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
    <img src="https://saltwx.com/images/logo_trans2.png" width="50%"></img>
    <ul class="menu">
      <li><img src=""></img></li>
      <li><a href="#">Map</a></li>
    </ul>
      <hr>
    <img src=""></img><a href="#">Choose Layers</a>
        <table class="tm">
  <tr>
    <th class="tm-eoti">Region</th>
    <th class="tm-eoti">Chloro</th>
    <th class="tm-ofeu">SST</th>
  </tr>
  <tr>
    <td class="tm-p2vz">Northeast</td>
    <td class="tm-1syz"><input type="checkbox" value="Toggle NOAA Buoy Layer" style="width:30px; height:30px" onclick="toggleLayers(1);"></input></td>
    <td class="tm-1syz"><input type="checkbox" value="Toggle NOAA Buoy Layer" style="width:30px; height:30px" onclick="toggleLayers(5);"></input></td>
  </tr>
  <tr>
    <td class="tm-p2vz">MidAtlantic</td>
    <td class="tm-1syz"><input type="checkbox" value="Toggle NOAA Buoy Layer" style="width:30px; height:30px" onclick="toggleLayers(2);"></input></td>
    <td class="tm-1syz"><input type="checkbox" value="Toggle NOAA Buoy Layer" style="width:30px; height:30px" onclick="toggleLayers(6);"></input></td>
  </tr>
  <tr>
    <td class="tm-p2vz">Southeast</td>
    <td class="tm-1syz"><input type="checkbox" value="Toggle NOAA Buoy Layer" style="width:30px; height:30px" onclick="toggleLayers(3);"></input></td>
    <td class="tm-1syz"><input type="checkbox" value="Toggle NOAA Buoy Layer" style="width:30px; height:30px" onclick="toggleLayers(7);"></input></td>
  </tr>
  <tr>
    <td class="tm-p2vz">Gulf of Mexico</td>
    <td class="tm-1syz"><input type="checkbox" value="Toggle NOAA Buoy Layer" style="width:30px; height:30px" onclick="toggleLayers(4);"></input></td>
    <td class="tm-1syz"><input type="checkbox" value="Toggle NOAA Buoy Layer" style="width:30px; height:30px" onclick="toggleLayers(8);"></input></td>
  </tr>
  <tr>
    <td class="tm-p2vz">Southwest</td>
    <td class="tm-1syz"><input type="checkbox" value="Toggle NOAA Buoy Layer" style="width:30px; height:30px" onclick="toggleLayers(9);"></input></td>
    <td class="tm-1syz"><input type="checkbox" value="Toggle NOAA Buoy Layer" style="width:30px; height:30px" onclick="toggleLayers(12);"></input></td>
  </tr>
  <tr>
    <td class="tm-p2vz">MidPacific</td>
    <td class="tm-1syz"><input type="checkbox" value="Toggle NOAA Buoy Layer" style="width:30px; height:30px" onclick="toggleLayers(10);"></input></td>
    <td class="tm-1syz"><input type="checkbox" value="Toggle NOAA Buoy Layer" style="width:30px; height:30px" onclick="toggleLayers(13);"></input></td>
  </tr>
  <tr>
    <td class="tm-p2vz">Northwest</td>
    <td class="tm-1syz"><input type="checkbox" value="Toggle NOAA Buoy Layer" style="width:30px; height:30px" onclick="toggleLayers(11);"></input></td>
    <td class="tm-1syz"><input type="checkbox" value="Toggle NOAA Buoy Layer" style="width:30px; height:30px" onclick="toggleLayers(14);"></input></td>
  </tr>
</table>
<hr>
<img src=""></img><a href="#">Tutorial</a><hr>
<img src=""></img><a href="#">About</a><hr>
<img src=""></img><a href="#">Account Settings</a><hr>
    </div>
  <button class="openbtn" onclick="openNav()">☰ HOME</button>&nbsp;
</header>
<nav class="navbar">
<div class="coordsbtn">Lat, Lon:<button class="coordsbtn" id="info"></div>&nbsp;
</nav>
<main>
  <div id="map"></div>
</main>


  <!-- End smartphone / tablet look -->
  </body>
</html>

CSS代码 

html, body, .wrapper {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height:auto;
background-color: #52669c;
margin: 0;
}

.wrapper {
  min-height: 100%;
}

#content {
    float: bottom;
    background: #ffffff;
    width: 100%;
    height: 80vh;
    }

#map {
width:100%;
height:100%;
}

.sidepanel {
  height: 100%; /* Specify a height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #52669c; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

/* The sidepanel links */
.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 50px;
  color: #ffffff;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */

/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 50px;
  margin-left: 50px;
}

/* Style the button that is used to open the sidepanel */
.openbtn {
  font-size: 50px;
  cursor: pointer;
  background-color: #52669c;
  color: white;
  padding: 1px 10px;
  border: none;
}

.openbtn:hover {
  background-color: #52669c;
}

table.blueTable {
font-family: Tahoma, Geneva, sans-serif;
background-color: #C6E8EE;
width: 100%;
height: 120px;
border-collapse: collapse;
border-radius: 15px;
}

table.blueTable td, table.blueTable th {
border: 0px solid #AAAAAA;
padding: 1px 1px;
}

table.blueTable tbody td {
font-size: 11px;
}

  .header {
    overflow: hidden;
    background-color: #52669c;
    position: fixed;
    width: 100%;
    height: 90px;
    }

  .navbar {
    overflow: hidden;
    background-color: #0099ff;
    position: fixed;
    width: 100%;
    height: 70px;
    }

  .coordsbtn {
    background-color: #0099ff;
    color: white;
    padding: 10px;
    font: Helvetica;
    font-size:38px;
    font-weight: bold;
    border: 1px;
  }

  .tg  {border-collapse:collapse;border-spacing:0;margin:0px auto;}
  .tg td{font-family:Arial, sans-serif;font-size:16px;padding:4px 4px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
  .tg th{font-family:Arial, sans-serif;font-size:16px;font-weight:normal;padding:4px 4px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
  .tg .tg-sjdo{font-size:14px;font-family:Tahoma, Geneva, sans-serif !important;;background-color:#ffffff;color:#000000;border-color:inherit;text-align:center;vertical-align:middle}
  .tg .tg-126y{font-weight:bold;font-size:14px;font-family:"Trebuchet MS", Helvetica, sans-serif !important;;background-color:#38fff8;color:#000000;border-color:inherit;text-align:center;vertical-align:middle}

  .AHS {
    font-size: 22px;
    font-weight: bold;
    text-decoration: underline;
    color: #52669c;
  }

  .AHSA {
    font-size: 14px;
    font-weight: bold;
    text-decoration: underline;
    color: #52669c;
  }

  .about {
    background: white;
    font-size: 18px;
    padding: 25px;
    }

.tm  {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tm td{font:Arial;font-size:40px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tm th{font:Arial;font-size:40px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tm .tm-ofeu{font-weight:normal;font-family:"Arial", Helvetica, sans-serif !important;;background-color:#52669c;color:#ffffff;border-color:#52669c;text-align:center;vertical-align:top}
.tm .tm-eoti{font-weight:normal;font-family:"Arial", Helvetica, sans-serif !important;;background-color:#52669c;color:#ffffff;border-color:#52669c;text-align:center;vertical-align:middle}
.tm .tm-p2vz{font-weight:normal;font-family:"Arial", Helvetica, sans-serif !important;;background-color:#52669c;color:#ffffff;border-color:#52669c;text-align:right;vertical-align:top}
.tm .tm-1syz{font-family:"Arial", Helvetica, sans-serif !important;;background-color:#52669c;color:#ffffff;border-color:#52669c;text-align:center;vertical-align:top}

1 个答案:

答案 0 :(得分：1)

因为导航处于fixed位置，而主处于static位置。

从W3schools引述：“固定元素不会在页面上通常留有空隙的地方留下空白。”

要解决此问题，您可能需要为 main 部分指定一个top-margin，并使用与 nav 高度相同的值。

相关问题
最新问题