如何在TailwindCSS中让Laravel卡片组件的Footer固定在底部

要实现卡片Footer始终处于底部，不受标题、段落长度影响，只需调整现有Flex布局的几个属性，核心是利用Tailwind的flex-1让内容区域填充剩余空间，配合justify-between将Footer推到底部。

修改步骤： #

1. 给卡片内部最外层的容器（py-6 px-5的div）添加flex flex-col，使其子元素垂直排列
2. 给包含header、正文、footer的容器（mt-8 flex flex-col justify-between的div）添加flex-1，让它填充图片下方的所有剩余空间
3. 可选：给<article>标签添加min-h-[500px]（可根据需求调整数值），确保所有卡片高度统一

修改后的完整代码： #

@props(['post'])
<article
    {{ $attributes->merge(['class' => 'transition-colors duration-300 hover:bg-gray-100 border border-black border-opacity-0 hover:border-opacity-5 rounded-xl min-h-[500px]']) }}>
<!-- 新增 flex flex-col 让内部元素垂直排列 -->
<div class="py-6 px-5 flex flex-col">
    <div>
        {{-- TODO --}}
        <img src="./images/illustration-3.png" alt="Blog Post illustration" class="rounded-xl">
    </div>

    <!-- 新增 flex-1 填充剩余空间 -->
    <div class="mt-8 flex flex-col justify-between flex-1">
        <header>
            <div class="space-x-2">
                <x-category-button :category="$post->category" />
            </div>

            <div class="mt-4">
                <h1 class="text-3xl">
                    <a href="/posts/{{ $post->slug }}">
                        {{ $post->title }}
                    </a>
                </h1>

                <span class="mt-2 block text-gray-400 text-xs">
                    Published <time>{{$post->created_at->diffForHumans()}}</time>
                </span>
            </div>
        </header>

        <div class="text-sm mt-4 space-y-4">
                {!! $post->excerpt !!}
        </div>

        <footer class="flex justify-between items-center">
            <div class="flex items-center text-sm">
                <img src="/images/lary-avatar.svg" alt="Lary avatar">
                <div class="ml-3 w-36">
                    <h5 class="font-bold">{{ $post->author->name }}</h5>
                </div>
            </div>

            <div>
                <a href="#"
                   class="transition-colors duration-300 text-xs font-semibold bg-gray-200 hover:bg-gray-300 rounded-full py-2 px-8"
                >Read More</a>
            </div>
        </footer>
    </div>
</div>
</article>

原理说明： #

• flex flex-col 让卡片内部的图片和内容容器垂直分布
• flex-1 强制内容容器填充图片下方的所有可用空间，确保justify-between能将Footer推到容器底部
• min-h-[500px] 保证所有卡片高度一致，避免内容较短的卡片显得过小

内容的提问来源于stack exchange，提问作者Abdusselam Kelani