Не могу заполнить высоту окна моей навигационной панелью - PullRequest
Новая
       3

Не могу заполнить высоту окна моей навигационной панелью

1 голос
/ 29 мая 2020

У меня проблема с меню в моем коде. Я хотел сделать панель навигации, которая на экране P C заполняла высоту с левой стороны и делала ее прокручиваемой вверху в мобильной версии.

Проблема в том, что мой гибкий контейнер не заполняется высота экрана, снизу сбивается .. Вот мой код: 

/* css */

body {
  margin: 0;
}

#main-doc {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}

#container-nav {
  position: fixed;
  height: 100%;
  width: 13.35em;
  display: flex;
  flex-direction: column;
  background-color: red;
}

#nav-header {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.nav-link {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  background: green;
}

#container-nav {
  padding: 1em;
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 780px) {
  #container-nav {
    position: absolute;
    width: 100%;
    padding: 0;
    overflow-y: scroll;
    height: 20%;
    border-right: none;
  }
  #main-doc {
    display: flex;
    flex-flow: column wrap;
  }
  #nav-header {
    flex: 0;
  }
  .nav-link {
    flex: 0;
    padding: 1em;
  }
}
<!-- html -->
<main id="main-doc">

  <nav id="navbar">
    <div id="container-nav">
      <header class="nav-link" id="nav-header">Flexbox Documentation</header>

      <a src=# class="nav-link">About</a>
      <a src=# class="nav-link">Basics</a>
      <a src=# class="nav-link">Flex Container Properties</a>
      <a src=# class="nav-link">Flex Items Properties</a>
      <a src=# class="nav-link">Examples</a>

    </div>
  </nav>
</main>

Ответы [ 2 ]

0 голосов
/ 29 мая 2020

Проблема создания столбца в полную высоту связана с макетом «Holy Grail» и на какое-то время решена с помощью flexbox и grid . .

Но, как уже упоминалось, для самого верхнего контейнера должно быть установлено значение min-height: 100vh, чтобы это работало. Используйте min-height вместо height, чтобы элемент мог при необходимости расширяться.

Кроме того, я очистил этот HTML путем а) ​​удаления ненужных элементов, классов и идентификаторов, б) перемещения header за пределами nav и c), помещая ваши навигационные ссылки в ul с правильными атрибутами href вместо src. 

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
}

a {
  color: inherit;
}

h1 {
  font-size: 1.25rem;
  margin: 1rem 0;
}

nav {
  background-color: red;
  padding: 2rem;
}
nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}
nav li {
  margin: 0 1rem 1rem 0;
}
nav a {
  background-color: green;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 2rem;
}
main p {
  height: 200rem;
}

@media screen and (max-width: 780px) {

  body {
    flex-direction: column;
  }
  nav ul {
    flex-direction: row;
  }

}
<body>

  <header></header>
  
  <nav>
    <h1>Flexbox Documentation</h1>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Basics</a></li>
      <li><a href="#">Flex Container Properties</a></li>
      <li><a href="#">Flex Items Properties</a></li>
      <li><a href="#">Examples</a></li>
    </ul>
  </nav>
  
  <main>
    <p>Main content</p>
  </main>
  
</body>
0 голосов
/ 29 мая 2020

Пробовали ли вы использовать vh?

1vh относится к 1% высоты экрана, поэтому попробуйте установить height на 100vw

EG #container-nav { height: 100vh; }

Подробнее здесь

...