溢出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% - the height of the absolute element，你的 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>

Answer 2

给你想要滚动的 div 以及溢出的最大高度：auto

Answer 3

这个问题可以通过一点重组来解决。

您嵌入所有 3 个 div 即 2 个带有列表选项的 div 和另一个带有设置和注销的 div 的事实可以通过这种方式以更好的方式完成：

    // here is one css change
    <html lang="en" style="
        height: 100%;
    "><head>
    </head>
    // here is one css change
    <body translate="no" style="
        height: 100%;
    ">
    // here is one css change
    <div class="w-64" style="
        height: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    ">
    // here is one css change
    <div class="overflow-y-scroll h-full " style="
        flex: 1 1 200px;
        min-height: 200px;
    ">
    <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>
    <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>
    </body>
    </html>

通过这种方式，您的列表项容器 div 将适应屏幕大小并仅在必要时显示滚动条。

希望有帮助！！！！

Answer 4

您可以使用此代码

body {
            margin: 0;
            padding: 0;
        }
        .w-64 {
            padding: 15px;
        }
        div.ex1 {
            background-color: lightblue;
            height: 100px;
            width: 300px;
            overflow-y: scroll;
        }
        .my-2 {
            margin: 0px!important;
        }

<div class="w-64">
        <div class="overflow-y-scroll h-full">
            <div class="ex1">
                <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="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>
            <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>