我的代码菜单出现问题。我想做一个导航栏,该导航栏在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>
使列全高的问题与'Holy Grail' layout有关,并且已经由flexbox和grid解决了一段时间。
但是如上所述,最上面的容器应该设置为min-height: 100vh
,这样才能起作用。如果需要,使用min-height
而不是height
允许元素扩展。
[另外,我还清理了HTML,方法是:a)删除不必要的元素,类和id,b)将header
移到nav
的外部,以及c)将导航链接以正确的[ C0]属性而不是ul
。
href
src