У меня есть Навбар. Как установить высоту элементов равной 100% от панели навигации? - PullRequest
Новая
       20

У меня есть Навбар. Как установить высоту элементов равной 100% от панели навигации?

0 голосов
/ 07 января 2020

Я пытался создать навигационную панель, но мне это не удалось. Div navbar имеет высоту 60px, однако я никак не могу увеличить высоту внутренних элементов. (кроме заполнения) Что я делаю не так?
Что я получаю
Что я пытаюсь получить 

#navbar {
      width: 100vw;
      height: 60px;
      background: #deff00;
      box-shadow: 0 0 50px black;
      z-index: 2;
      position: relative;
      top: 85px;
    }
    #navbar ul {
      height: 100%;
      list-style: none;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .navbar-link {
      text-decoration: none;
      color: black;
      height: 60px;
      padding: 0 20px;
    }
    .navbar-link:hover {
      background: #adc703;
    }
<div id="navbar">
          <ul>
            <li>
              <a href="#" style="font-weight: bold;" class="navbar-link"
                >ÚVODNÍ STRÁNKA</a
              >
            </li>
            <li>
              <a href="#" class="navbar-link">ŠKOLA</a>
            </li>
            <li><a href="#" class="navbar-link">STUDIUM</a></li>
            <li><a href="#" class="navbar-link">FOTOGALERIE</a></li>
            <li><a href="#" class="navbar-link">KONTAKT</a></li>
          </ul>
    </div>

Спасибо!

Ответы [ 2 ]

0 голосов
/ 08 января 2020

Попробуйте: 

#navbar {
      width: 100vw;
      height: 60px;
      background: #deff00;
      box-shadow: 0 0 50px black;
      z-index: 2;
      position: relative;
      top: 85px;
}
#navbar ul {
      height: 100%;
      list-style: none;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
}

#navbar li {
      display: table;
} 

.navbar-link {
      text-decoration: none;
      color: black;
      height: 60px;
      padding: 0 20px;
      vertical-align: middle;
      display: table-cell;
}

.navbar-link:hover {
      background: #adc703;
}

Только что добавили display: table; для li и vertical-align: middle;display: table-cell для тега, иногда эта старая техника подходит идеально) Codepen: https://codepen.io/Liveindream/pen/mdyXmxj?editors=1100

0 голосов
/ 07 января 2020

Если я правильно понимаю этот вопрос, вы хотите поднять элементы по высоте. То, что мешает вам делать это, находится внутри вашего CSS

#navbar ul {
height: 100%;
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

Удалите align-items: center; из #navbar ul

Так, чтобы это выглядело так: 

#navbar ul {
height: 100%;
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

Теперь вы сможете увеличивать и / или уменьшать его по высоте, чтобы правильно выровнять его по тегу div так, как вам хочется.

...