无法用导航栏填充窗口的高度

问题描述 投票:1回答:2

我的代码菜单出现问题。我想做一个导航栏,该导航栏在PC屏幕上填充左侧的高度,并使其在移动版本的顶部可滚动。

问题是我的flex容器没有填满屏幕的高度,它正在底部移动。这是我的代码:

/* 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>
html css flexbox
2个回答
0
投票

您是否尝试过使用vh

[1vh相对于屏幕高度的1%,因此请尝试将height设置为100vw

例如#container-nav { height: 100vh; }

More Info Here


0
投票

使列全高的问题与'Holy Grail' layout有关,并且已经由flexboxgrid解决了一段时间。

但是如上所述,最上面的容器应该设置为min-height: 100vh,这样才能起作用。如果需要,使用min-height而不是height允许元素扩展。

[另外,我还清理了HTML,方法是:a)删除不必要的元素,类和id,b)将header移到nav的外部,以及c)将导航链接以正确的[ C0]属性而不是ul

href
src
© www.soinside.com 2019 - 2024. All rights reserved.