我有這個儀表板布局，用TailwindCSS創建的。當我在手機大小的視圖中打開側邊欄時，它在頁面底部添加了一個填充，產生了一個垂直滾動條。
$(function () {
$('#open-mobile-menu').one('click', function () {
$('#mobile-menu').toggleClass('hidden');
});
$('#open-mobile-menu').on('click', function () {
anime({
targets: '#mobile-menu',
translateX: () => ["-100%", "0%"],
easing: "easeInOutQuart"
})
$('#mobile-menu-overlay').fadeIn();
$('#app').addClass('overflow-y-hidden');
});
$('#close-mobile-menu').on('click', function () {
anime({
targets: '#mobile-menu',
translateX: () => ["0%", "-100%"],
easing: "easeInOutQuart"
})
$('#mobile-menu-overlay').fadeOut();
$('#app').removeClass('overflow-y-hidden');
});
});<!DOCTYPE html>
<html lang="en" class="h-full bg-white">
<head>
<link rel="preload" as="style" />
<link rel="stylesheet" />
</head>
<body class="h-full">
<div class="fixed inset-0 bg-gray-900/80 hidden" id="mobile-menu-overlay"></div>
<div>
<div class="relative z-50 hidden min-h-screen" role="dialog" aria-modal="true" id="mobile-menu">
<div class="fixed inset-0 flex">
<div class="relative mr-16 flex w-full max-w-xs flex-1">
<div class="absolute left-full top-0 flex w-16 justify-center pt-5">
<button type="button" class="-m-2.5 p-2.5" id="close-mobile-menu">
<span class="sr-only">
Close sidebar
</span>
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-2 ring-1 ring-white/10">
<div class="flex h-16 shrink-0 items-center">
<img class="h-8 w-auto" src="https://placehold.co/32x32" alt="Matchlytix">
</div>
<nav class="flex flex-1 flex-col">
<ul role="list" class="flex flex-1 flex-col gap-y-7">
<li>
<ul role="list" class="-mx-2 space-y-1">
<li>
<a class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
Dashboard
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6">
<div class="flex h-16 shrink-0 items-center">
<img class="h-8 w-auto" src="https://placehold.co/32x32" alt="Matchlytix">
</div>
<nav class="flex flex-1 flex-col">
<ul role="list" class="flex flex-1 flex-col gap-y-7">
<li>
<ul role="list" class="-mx-2 space-y-1">
<li>
<a class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
Dashboard
</a>
</li>
</ul>
</li>
<li class="mt-auto flex space-between items-center">
<div class="flex flex-shrink-0 py-4 w-full justify-between">
<a href="#" class="group block flex-shrink-0">
<div class="flex items-center">
<div>
<img class="inline-block h-9 w-9 rounded-full" src="https://placehold.co/36x36" alt="">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-white">Tom Cook</p>
<p class="text-xs font-medium text-gray-300 group-hover:text-gray-200">
View profile
</p>
</div>
</div>
</a>
<div class="flex items-center justify-end">
<a href="#" class="text-gray-400 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 block">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
</svg>
</a>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
<div class="fixed top-0 z-40 flex items-center gap-x-6 bg-gray-900 px-4 py-4 shadow-sm sm:px-6 lg:hidden min-w-full">
<button type="button" class="-m-2.5 p-2.5 text-gray-400 lg:hidden" id="open-mobile-menu">
<span class="sr-only">
Open sidebar
</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
<div class="flex-1 text-sm font-semibold leading-6 text-white">Dashboard</div>
<a href="#">
<span class="sr-only">
View your profile
</span>
<img class="h-8 w-8 rounded-full bg-gray-800" src="https://placehold.co/32x32" alt="">
</a>
</div>
<main class="py-10 lg:pl-72">
<div class="px-4 sm:px-6 lg:px-8">
</div>
</main>
</div>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>這是因為#mobile-menu占用了布局空間。你需要考慮將position: fixed從#mobile-menu的內部元素轉移到自身，比如:
$(function () {
$('#open-mobile-menu').one('click', function () {
$('#mobile-menu').toggleClass('hidden');
});
$('#open-mobile-menu').on('click', function () {
anime({
targets: '#mobile-menu',
translateX: () => ["-100%", "0%"],
easing: "easeInOutQuart"
})
$('#mobile-menu-overlay').fadeIn();
$('#app').addClass('overflow-y-hidden');
});
$('#close-mobile-menu').on('click', function () {
anime({
targets: '#mobile-menu',
translateX: () => ["0%", "-100%"],
easing: "easeInOutQuart"
})
$('#mobile-menu-overlay').fadeOut();
$('#app').removeClass('overflow-y-hidden');
});
});<!DOCTYPE html>
<html lang="en" class="h-full bg-white">
<head>
<link rel="preload" as="style" />
<link rel="stylesheet" />
</head>
<body class="h-full">
<div class="fixed inset-0 bg-gray-900/80 hidden" id="mobile-menu-overlay"></div>
<div>
<div class="fixed z-50 hidden w-full" role="dialog" aria-modal="true" id="mobile-menu">
<div class="min-h-screen flex">
<div class="relative mr-16 flex w-full max-w-xs flex-1">
<div class="absolute left-full top-0 flex w-16 justify-center pt-5">
<button type="button" class="-m-2.5 p-2.5" id="close-mobile-menu">
<span class="sr-only">
Close sidebar
</span>
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-2 ring-1 ring-white/10">
<div class="flex h-16 shrink-0 items-center">
<img class="h-8 w-auto" src="https://placehold.co/32x32" alt="Matchlytix">
</div>
<nav class="flex flex-1 flex-col">
<ul role="list" class="flex flex-1 flex-col gap-y-7">
<li>
<ul role="list" class="-mx-2 space-y-1">
<li>
<a class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
Dashboard
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6">
<div class="flex h-16 shrink-0 items-center">
<img class="h-8 w-auto" src="https://placehold.co/32x32" alt="Matchlytix">
</div>
<nav class="flex flex-1 flex-col">
<ul role="list" class="flex flex-1 flex-col gap-y-7">
<li>
<ul role="list" class="-mx-2 space-y-1">
<li>
<a class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
Dashboard
</a>
</li>
</ul>
</li>
<li class="mt-auto flex space-between items-center">
<div class="flex flex-shrink-0 py-4 w-full justify-between">
<a href="#" class="group block flex-shrink-0">
<div class="flex items-center">
<div>
<img class="inline-block h-9 w-9 rounded-full" src="https://placehold.co/36x36" alt="">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-white">Tom Cook</p>
<p class="text-xs font-medium text-gray-300 group-hover:text-gray-200">
View profile
</p>
</div>
</div>
</a>
<div class="flex items-center justify-end">
<a href="#" class="text-gray-400 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 block">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
</svg>
</a>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
<div class="fixed top-0 z-40 flex items-center gap-x-6 bg-gray-900 px-4 py-4 shadow-sm sm:px-6 lg:hidden min-w-full">
<button type="button" class="-m-2.5 p-2.5 text-gray-400 lg:hidden" id="open-mobile-menu">
<span class="sr-only">
Open sidebar
</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
<div class="flex-1 text-sm font-semibold leading-6 text-white">Dashboard</div>
<a href="#">
<span class="sr-only">
View your profile
</span>
<img class="h-8 w-8 rounded-full bg-gray-800" src="https://placehold.co/32x32" alt="">
</a>
</div>
<main class="py-10 lg:pl-72">
<div class="px-4 sm:px-6 lg:px-8">
</div>
</main>
</div>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>