Разделение Navbar и основных HTML разделов - PullRequest
Новая
       4

Разделение Navbar и основных HTML разделов

0 голосов
/ 05 февраля 2020

Проблема

У меня есть макет веб-страницы, в котором есть раздел header, navbar и main, плюс свертывание sidebar. Я оптимизирую это для просмотра на мобильных устройствах, но у меня возникают проблемы с разделением main и navbar. Похоже, что navbar в данный момент расположен так, что перекрывает main section.

Вопрос

Почему перекрываются 2 раздела?

HTML Код

image

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 Ответ

1 голос
/ 05 февраля 2020

Поскольку nav имеет позицию fixed, а main имеет позицию static.

Цитирование из W3schools : «Фиксированный элемент не оставляет пробел на странице, где он обычно находился бы».

Чтобы преодолеть это, вам может потребоваться дать top-margin для main сечение с тем же значением nav height.

...