html - 溢出 y 滚动菜单上没有滚动条

Question

我有一个菜单，其中包含一个元素列表，当窗口高度太小时，我希望能够滚动浏览这些元素。该菜单还有一个固定的底部，其中包含一些其他菜单项，我希望它们保留在屏幕底部，并在窗口太小时保持在其他菜单项之上。

我在菜单项容器上添加了一个溢出 y 滚动条，但我没有得到任何滚动条。

这是一个显示菜单的代码笔。 https://codepen.io/jachno/pen/QWWLzvj

当您查看 codepen 时，我希望能够滚动元素 1 到 11。

<div  class="w-64">
    <div class="overflow-y-scroll h-full ">
        <div class="flex-grow" id="sub-menu" >
            <div class=" tw-bg-white tw-mr-0  tw-flex  tw-flex-col ">
                 <router-link exact-active-class="side-menu-item-active" class="side-menu-item active  "
                                     :to="'/home' ">1
                 </router-link>
                 <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
                    <div style="height: 60%;"></div>
                 </div>
                 <router-link exact-active-class="side-menu-item-active" class="side-menu-item active"
                                     :to="'/home/tasks'">2
                 </router-link>
                 <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
                     <div style="height: 60%;"></div>
                 </div>

                 <router-link exact-active-class="side-menu-item-active" class="side-menu-item active   "
                                     :to="'/home/venues'">3
                 </router-link>
                 <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
                    <div class="" style="height: 60%;"></div>
                  </div>
                  <router-link exact-active-class="side-menu-item-active" class="side-menu-item active"
                                     :class="{'side-menu-item-active': isActive == 'createCompany' }"
                                     :to="'/home/companies'">4
                  </router-link>
                  <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
                     <div style="height: 60%;"></div>
                  </div>
                  <router-link exact-active-class="side-menu-item-active" class="side-menu-item active"
                                     :to="'/home/invitations'">5
                  </router-link>
                  <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
                      <div style="height: 60%;"></div>
                  </div>
                  <router-link exact-active-class="side-menu-item-active" class="side-menu-item active"
                                     v-if="Spark.admin == 1" :to="'/home/bdm'">6
                  </router-link>
                  <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
                      <div style="height: 60%;"></div>
                  </div>
                  <router-link exact-active-class="side-menu-item-active" class="side-menu-item active"
                                     :to="'/home/settings'">7
                  </router-link>
                </div>
           </div>
           <div class="my-2">
              <div class="border-t border-grey-light" style="width: 90%"></div>

              <div class="flex-grow   relative"  id="sub-menu">
        <div class=" bg-white mr-0  flex  flex-col ">
            <router-link exact-active-class="side-menu-item-active"  class="side-menu-item active"     :to="'/home/'">8</router-link>
            <div   class="side-menu-item active" >9</div>
            <a   class="side-menu-item active"    href="/telescope">10</a>
            <a  class="side-menu-item active"    href="/richie">11</a>
        </div>
    </div>

  </div>

  <div class="bottom-0 z-100 absolute pb-8 bg-white  w-full">
    <div class=" tw-border-t tw-border-grey-light hover:tw-bg-grey-lightest" @click="menu = !menu">

        <div class="tw-flex tw-p-2">

            <div class="ml-1 flex-grow">
            </div>
            <div class=" flex justify-center items-center ">
                <i class="tw-mr-1 fa fa-chevron-down tw-text-grey-darker tw-ml-1" v-if="!menu" aria-hidden="true"></i>
                <i class="tw-mr-1 fa fa-chevron-up tw-text-grey-darker tw-ml-1" v-if="menu" aria-hidden="true"></i>

            </div>
        </div>
        <div v-if="menu">
            <div class=" tw-bg-white tw-mr-0  tw-flex  tw-flex-col ">
                <router-link exact-active-class="side-menu-item-active"  class="side-menu-item active"     :to="'/home/settings'">Settings</router-link>
            </div>
            <div class=" tw-bg-white tw-mr-0  tw-flex  tw-flex-col ">
                <router-link exact-active-class="side-menu-item-active"  class="side-menu-item active"     :to="'/logout'">Logout</router-link>
            </div>
          </div>
        </div>            
      </div>
    </div>
  </div>
</div>

Answer 1

坚持基本的溢出，你的 div 需要一个设置的高度，在这个高度之后滚动可以出现。因此，如果您将高度设置为 100% - 绝对元素的高度，您的 div 将显示一个滚动条

.set-scroll {
  max-height: calc(100vh - 100px);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.0.1/tailwind.min.css" rel="stylesheet" />
<div class="w-64">


  <div class="overflow-y-scroll set-scroll">

    <div class="flex-grow" id="sub-menu">
      <div class=" tw-bg-white tw-mr-0  tw-flex  tw-flex-col ">
        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active  " :to="'/home' ">1
        </router-link>
        <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
          <div style="height: 60%;"></div>
        </div>
        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/tasks'">2
        </router-link>
        <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
          <div style="height: 60%;"></div>
        </div>

        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active   " :to="'/home/venues'">3
        </router-link>
        <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
          <div class="" style="height: 60%;"></div>
        </div>
        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :class="{'side-menu-item-active': isActive == 'createCompany' }" :to="'/home/companies'">4
        </router-link>
        <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
          <div style="height: 60%;"></div>
        </div>
        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/invitations'">5
        </router-link>
        <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
          <div style="height: 60%;"></div>
        </div>
        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" v-if="Spark.admin == 1" :to="'/home/bdm'">6
        </router-link>
        <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
          <div style="height: 60%;"></div>
        </div>
        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/settings'">7
        </router-link>
      </div>

    </div>
    <div class="my-2">
      <div class="border-t border-grey-light" style="width: 90%"></div>

      <div class="flex-grow   relative" id="sub-menu">
        <div class=" bg-white mr-0  flex  flex-col ">
          <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/'">8</router-link>
          <div class="side-menu-item active">9</div>
          <a class="side-menu-item active" href="/telescope">10</a>
          <a class="side-menu-item active" href="/richie">11</a>


        </div>



      </div>




    </div>

    <div class="bottom-0 z-100 absolute pb-8 bg-white  w-full">
      <div class=" tw-border-t tw-border-grey-light hover:tw-bg-grey-lightest" @click="menu = !menu">

        <div class="tw-flex tw-p-2">

          <div class="ml-1 flex-grow">
          </div>
          <div class=" flex justify-center items-center ">
            <i class="tw-mr-1 fa fa-chevron-down tw-text-grey-darker tw-ml-1" v-if="!menu" aria-hidden="true"></i>
            <i class="tw-mr-1 fa fa-chevron-up tw-text-grey-darker tw-ml-1" v-if="menu" aria-hidden="true"></i>

          </div>
        </div>
        <div v-if="menu">
          <div class=" tw-bg-white tw-mr-0  tw-flex  tw-flex-col ">
            <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/settings'">Settings</router-link>
          </div>
          <div class=" tw-bg-white tw-mr-0  tw-flex  tw-flex-col ">
            <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/logout'">Logout</router-link>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>