我想要一个下拉导航栏,(与标题)涵盖了整个视口。我不希望导航下拉菜单后面的内容在下拉菜单后面滚动。
我通过在header
和nav
元素上使用position: fixed
实现了这一点。当我的菜单按钮被点击时,body
应用了overflow: hidden
。
问题是,在非常小的视口中,底部的导航列表项落在视口之外,我无法向下滚动查看/单击它们。
这是我的代码。
header {
height: 60px;
background-color: green;
}
body.nav-shown {
overflow: hidden;
}
body.nav-shown header {
position: fixed;
top: 0;
left: 0;
right: 0;
}
body.nav-shown nav {
position: fixed;
top: 60px;
left: 0;
right: 0;
min-height: calc(100vh - 60px);
background-color: black;
color: white;
font-size: 30px;
line-height: 3em;
overflow: scroll;
}
<body class="nav-shown">
<header>
<button class="nav-button">Menu</button>
<nav>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
<li>Link6</li>
<li>Link7</li>
<li>Link8</li>
<li>Link9</li>
</ul>
</nav>
</header>
4条答案
按热度按时间carvr3hs1#
固定段必须设置
width
,height
和top
,bottom
属性,否则无法识别其大小和位置。在这种情况下,您可以使用
max-height: 100%;
到nav
。xnifntxz2#
你可以给予overflow:在header元素上设置auto,并将min-height设置为header元素,而不是nav元素。下面是更新后的代码。试试这个:
aelbi1ox3#
我最终做的是:
类似于这个问题:Hide all elements except one div for print view
单击时,我将
display: none
设置为页面上的所有内容(我将所有内容都 Package 在div中),除了header
。这消除了nav
背后的内容滚动问题,因为没有任何内容可以滚动。然后我将
header
和nav
设置为position: absolute
,这样在小的视口中,用户可以向下滚动到导航中的最后一个链接。这消除了固定定位不允许滚动的问题。snz8szmq4#
高度100%在这里,修复这个
}