如何将部分内容调整为卡片停止通过页脚
how can I adjust the section content to the card stop passing by the footer
我正在尝试创建一个简单的页面导航栏、内容和页脚。
在我的内容部分，我有一堆卡片，当我在移动模式下或当我的页面有超过 6 张卡片时，最后一张卡片从页脚处消失。
你们能帮我理解我做错了什么吗？
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="h-screen flex flex-col bg-gray-200">
<nav class="bg-gray-800 flex items-center justify-between h-16">
<div class="flex">
<h4>logo</h4><a class="text-white" href="/"></a>
</div><a class="text-white" href="/contact/">Contact</a>
</nav>
<section class="bg-gray-200">
<div class="py-5 px-14 h-auto min-h-full w-screen max-w-full">
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="max-w-sm rounded overflow-hidden shadow-lg transform transition duration-500 hover:scale-110">
<div><img class="w-full" src="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg"></div>
<div class="px-6 py-4"><a href="2" class="font-bold text-xl mb-2">image 1</a>
<p class="text-gray-700 text-base">yeahhhhh</p>
</div>
</div>
<div class="max-w-sm rounded overflow-hidden shadow-lg transform transition duration-500 hover:scale-110">
<div><img class="w-full" src="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg"></div>
<div class="px-6 py-4"><a href="3" class="font-bold text-xl mb-2">image 2</a>
<p class="text-gray-700 text-base">yeahhhhh</p>
</div>
</div>
<div class="max-w-sm rounded overflow-hidden shadow-lg transform transition duration-500 hover:scale-110">
<div><img class="w-full" src="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg"></div>
<div class="px-6 py-4"><a href="4" class="font-bold text-xl mb-2">image 3</a>
<p class="text-gray-700 text-base">yeahhhhh</p>
</div>
</div>
<div class="max-w-sm rounded overflow-hidden shadow-lg transform transition duration-500 hover:scale-110">
<div><img class="w-full" src="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg"></div>
<div class="px-6 py-4"><a href="5" class="font-bold text-xl mb-2">image 4</a>
<p class="text-gray-700 text-base">yeahhhhh</p>
</div>
</div>
</div>
</div>
</section>
<footer class="w-full fixed bottom-0 z-10 bg-gray-800 p-4">footer</footer>
</div>
在第一个 div 部分的底部添加一些边距。
<div>
<nav>
--
</nav>
<section>
<div class="mb-20">
---
</div>
</section>
<footer class="w-full fixed bottom-0 z-10 bg-gray-800 p-4">footer</footer>
</div>
您的页脚需要一些 space，与此同时，该部分转到页脚 space 因此结果溢出。
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="h-screen flex flex-col bg-gray-200">
<nav class="bg-gray-800 flex items-center justify-between h-16">
<div class="flex">
<h4>logo</h4>
<a class="text-white" href="/"></a>
</div>
<a class="text-white" href="/contact/">Contact</a>
</nav>
<section class="bg-gray-200">
<div class="py-5 px-14 mb-20 h-auto min-h-full w-screen max-w-full">
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="max-w-sm rounded overflow-hidden shadow-lg transform transition duration-500 hover:scale-110">
<div><img class="w-full" src="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg" /></div>
<div class="px-6 py-4">
<a href="2" class="font-bold text-xl mb-2">image 1</a>
<p class="text-gray-700 text-base">yeahhhhh</p>
</div>
</div>
<div class="max-w-sm rounded overflow-hidden shadow-lg transform transition duration-500 hover:scale-110">
<div><img class="w-full" src="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg" /></div>
<div class="px-6 py-4">
<a href="3" class="font-bold text-xl mb-2">image 2</a>
<p class="text-gray-700 text-base">yeahhhhh</p>
</div>
</div>
<div class="max-w-sm rounded overflow-hidden shadow-lg transform transition duration-500 hover:scale-110">
<div><img class="w-full" src="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg" /></div>
<div class="px-6 py-4">
<a href="4" class="font-bold text-xl mb-2">image 3</a>
<p class="text-gray-700 text-base">yeahhhhh</p>
</div>
</div>
<div class="max-w-sm rounded overflow-hidden shadow-lg transform transition duration-500 hover:scale-110">
<div><img class="w-full" src="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg" /></div>
<div class="px-6 py-4">
<a href="5" class="font-bold text-xl mb-2">image 4</a>
<p class="text-gray-700 text-base">yeahhhhh</p>
</div>
</div>
</div>
</div>
</section>
<footer class="py-2 px-10 h-10 w-full fixed bottom-0 z-10 bg-gray-800 p-4">footer</footer>
</div>
我正在尝试创建一个简单的页面导航栏、内容和页脚。
在我的内容部分，我有一堆卡片，当我在移动模式下或当我的页面有超过 6 张卡片时，最后一张卡片从页脚处消失。
你们能帮我理解我做错了什么吗？
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="h-screen flex flex-col bg-gray-200">
<nav class="bg-gray-800 flex items-center justify-between h-16">
<div class="flex">
<h4>logo</h4><a class="text-white" href="/"></a>
</div><a class="text-white" href="/contact/">Contact</a>
</nav>
<section class="bg-gray-200">
<div class="py-5 px-14 h-auto min-h-full w-screen max-w-full">
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="max-w-sm rounded overflow-hidden shadow-lg transform transition duration-500 hover:scale-110">
<div><img class="w-full" src="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg"></div>
<div class="px-6 py-4"><a href="2" class="font-bold text-xl mb-2">image 1</a>
<p class="text-gray-700 text-base">yeahhhhh</p>
</div>
</div>
<div class="max-w-sm rounded overflow-hidden shadow-lg transform transition duration-500 hover:scale-110">
<div><img class="w-full" src="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg"></div>
<div class="px-6 py-4"><a href="3" class="font-bold text-xl mb-2">image 2</a>
<p class="text-gray-700 text-base">yeahhhhh</p>
</div>
</div>
<div class="max-w-sm rounded overflow-hidden shadow-lg transform transition duration-500 hover:scale-110">
<div><img class="w-full" src="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg"></div>
<div class="px-6 py-4"><a href="4" class="font-bold text-xl mb-2">image 3</a>
<p class="text-gray-700 text-base">yeahhhhh</p>
</div>
</div>
<div class="max-w-sm rounded overflow-hidden shadow-lg transform transition duration-500 hover:scale-110">
<div><img class="w-full" src="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg"></div>
<div class="px-6 py-4"><a href="5" class="font-bold text-xl mb-2">image 4</a>
<p class="text-gray-700 text-base">yeahhhhh</p>
</div>
</div>
</div>
</div>
</section>
<footer class="w-full fixed bottom-0 z-10 bg-gray-800 p-4">footer</footer>
</div>
在第一个 div 部分的底部添加一些边距。
<div>
<nav>
--
</nav>
<section>
<div class="mb-20">
---
</div>
</section>
<footer class="w-full fixed bottom-0 z-10 bg-gray-800 p-4">footer</footer>
</div>
您的页脚需要一些 space，与此同时，该部分转到页脚 space 因此结果溢出。
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="h-screen flex flex-col bg-gray-200">
<nav class="bg-gray-800 flex items-center justify-between h-16">
<div class="flex">
<h4>logo</h4>
<a class="text-white" href="/"></a>
</div>
<a class="text-white" href="/contact/">Contact</a>
</nav>
<section class="bg-gray-200">
<div class="py-5 px-14 mb-20 h-auto min-h-full w-screen max-w-full">
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="max-w-sm rounded overflow-hidden shadow-lg transform transition duration-500 hover:scale-110">
<div><img class="w-full" src="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg" /></div>
<div class="px-6 py-4">
<a href="2" class="font-bold text-xl mb-2">image 1</a>
<p class="text-gray-700 text-base">yeahhhhh</p>
</div>
</div>
<div class="max-w-sm rounded overflow-hidden shadow-lg transform transition duration-500 hover:scale-110">
<div><img class="w-full" src="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg" /></div>
<div class="px-6 py-4">
<a href="3" class="font-bold text-xl mb-2">image 2</a>
<p class="text-gray-700 text-base">yeahhhhh</p>
</div>
</div>
<div class="max-w-sm rounded overflow-hidden shadow-lg transform transition duration-500 hover:scale-110">
<div><img class="w-full" src="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg" /></div>
<div class="px-6 py-4">
<a href="4" class="font-bold text-xl mb-2">image 3</a>
<p class="text-gray-700 text-base">yeahhhhh</p>
</div>
</div>
<div class="max-w-sm rounded overflow-hidden shadow-lg transform transition duration-500 hover:scale-110">
<div><img class="w-full" src="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg" /></div>
<div class="px-6 py-4">
<a href="5" class="font-bold text-xl mb-2">image 4</a>
<p class="text-gray-700 text-base">yeahhhhh</p>
</div>
</div>
</div>
</div>
</section>
<footer class="py-2 px-10 h-10 w-full fixed bottom-0 z-10 bg-gray-800 p-4">footer</footer>
</div>