我有一个菜单，其中包含一个项目列表，我希望能够在窗口高度太小时滚动浏览这些项目。该菜单还有一个固定的底部，其中包含一些其他菜单项，我希望这些菜单项保留在屏幕底部，并在窗口太小时保持在其他菜单项之上。
我已经在菜单项容器中添加了一个溢出 y 滚动，但我没有得到任何滚动条。
下面是一个代码笔，用于显示正在运行的菜单。 https://codepen.io/jachno/pen/QWWLzvj
当您查看代码笔时，我希望能够滚动的是项目 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>
坚持基本的溢出，你的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>为要滚动的div 指定最大高度以及溢出：自动
这个问题可以通过一点点重组来解决。
事实上，您可以通过以下方式以更好的方式嵌入所有 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 将适应屏幕大小，并仅在必要时显示滚动条。
希望有帮助!!!
您可以使用此代码
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>