css 位置固定下拉菜单无法滚动到链接底部

sbtkgmzw 于 2023-05-19 发布在其他

关注(0)|答案(4)|浏览(237)

我想要一个下拉导航栏，（与标题）涵盖了整个视口。我不希望导航下拉菜单后面的内容在下拉菜单后面滚动。
我通过在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>

css

来源：https://stackoverflow.com/questions/76254020/position-fixed-drop-down-menu-cant-scroll-to-bottom-of-links

4条答案

按热度按时间

carvr3hs1#

固定段必须设置width，height和top，bottom属性，否则无法识别其大小和位置。
在这种情况下，您可以使用max-height: 100%;到nav。

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);
  max-height: 100%;
  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>
</body>

赞(0）回复(0）举报 2023-05-19

xnifntxz2#

你可以给予overflow：在header元素上设置auto，并将min-height设置为header元素，而不是nav元素。下面是更新后的代码。试试这个：

header {
        height: 60px;
        background-color: green;
    }

    body.nav-shown {
        overflow: hidden;
    }

    body.nav-shown header {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          overflow: auto;
          min-height: calc(100vh - 60px);
    }


    body.nav-shown nav {
         position: absolute;
          top: 60px;
          left: 0;
          right: 0;
          background-color: black;
          color: white;
          font-size: 30px;
          line-height: 3em;
    }

<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>

    </body>

赞(0）回复(0）举报 2023-05-19

aelbi1ox3#

我最终做的是：
类似于这个问题：Hide all elements except one div for print view
单击时，我将display: none设置为页面上的所有内容（我将所有内容都 Package 在div中），除了header。这消除了nav背后的内容滚动问题，因为没有任何内容可以滚动。
然后我将header和nav设置为position: absolute，这样在小的视口中，用户可以向下滚动到导航中的最后一个链接。这消除了固定定位不允许滚动的问题。

赞(0）回复(0）举报 2023-05-19

snz8szmq4#

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;
      height: 100%;
      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>

高度100%在这里，修复这个

body.nav-shown nav {
 position: fixed;
 top: 60px;
 left: 0;
 right: 0;
 height: 100%;   
 min-height: calc(100vh - 60px);
 background-color: black;
 color: white;
 font-size: 30px;
 line-height: 3em;

}

赞(0）回复(0）举报 2023-05-19

我来回答

css 位置固定下拉菜单无法滚动到链接底部

4条答案

相关问题

热门标签

最新问答