欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

位置固定下拉菜單可以& # 39；不要滾動到鏈接底部

CSS
錢琪琛1年前10瀏覽0評論

我想要一個下拉導航條(與標題)覆蓋整個視窗。我不希望導航下拉菜單后面的內容在下拉菜單后面滾動。

我通過在標題和導航元素上使用position: fixed實現了這一點。當我的菜單按鈕被點擊時，主體溢出:隱藏應用。

問題是，在非常小的視窗中，底部的導航列表項目落在視窗之外，我不能向下滾動查看/點擊它們。

這是我的代碼。

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>

固定部分應該設置寬度、高度和頂部、底部屬性，否則它將無法識別其大小和位置。

在這種情況下，您可以使用最大高度:100%；導航系統。

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>

您可以在header元素上設置overflow: 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>

我最終做的是:

與此問題類似:隱藏除打印視圖的一個div之外的所有元素

點擊時，我設置了display: none來顯示頁面上的所有內容(我已經將所有內容包裝在一個div中)，除了標題。這消除了導航后面內容滾動的問題，因為沒有什么可滾動的。

然后我將標題和導航設置為position: absolute，這樣在小視窗中用戶可以向下滾動到導航中的最后一個鏈接。這消除了固定位置不允許滾動的問題。

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>