Tailwind - 页脚不粘，当相邻元素溢出时被推过

Question

试了几个sourceforge的解决方案好像都找不到。感谢有人能找到 link 的解决方案

问题：我有 3 个弹性列元素

子Header
主要（overflow-y-auto）
子页脚

不知何故，当主要内容溢出时，子页脚被向下推到屏幕尺寸之外。我错过了哪里？

代码： https://play.tailwindcss.com/GHQWK3Fxw1

Answer 1

外层容器应该是max-h-screen然后设置适当的溢出。因为 Mainscreen div 是 flex 它将填充它的 max-h-screen 父级的高度。

<div class="container w-screen bg-green-100">
    <div class="flex flex-col max-h-screen w-full overflow-hidden">
        <!-- Start Header -->
        <div class="py-3 bg-gray-700 text-white text-center">Header</div>
        <!-- End Header -->
        <!-- Start Mainscreen -->
        <div class="flex flex-col mb-auto p-0 overflow-hidden">
            <div class="flex flex-row h-full w-full overflow-hidden">
                <div class="flex w-72 bg-yellow-100">Sidebar</div>
                <!-- Content -->
                <div class="flex w-full max-h-full flex-col overflow-auto">
                    <div class="py-2 bg-gray-100 text-gray-700 text-center">Sub Header</div>
                    <div class="h-full overflow-y-auto p-5"> What is Lorem Ipsum? Lorem Ipsum is simply dummy text of t ....</div>
                    <div class="py-5 bg-gray-700 text-center text-white">Sub Footer</div>
                </div>
                <!-- End Content -->
                <div class="flex w-72 bg-purple-100">Rightbar</div>
            </div>
        </div>
        <!-- End Mainscreen -->
    </div>
</div>

Tailwind on Codeply

Tailwind - 页脚不粘，当相邻元素溢出时被推过

Tailwind - Footer is not sticky and push by when neibouring element is overflow

html

css

tailwind-css