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

Posted 2023-03-06

【中文标题】Tailwind - 当相邻元素溢出时，页脚不粘并被推动

【英文标题】：Tailwind - Footer is not sticky and push by when neibouring element is overflow

【发布时间】：2021-11-14 22:49:07

【问题描述】：

从 sourceforge 尝试了几种解决方案似乎找不到它。感谢有人能找到解决方案的链接

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

子标题 主要（带有溢出-y-auto） 子页脚

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

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

【问题讨论】：

你添加了postition:sticky;给它？我没注意到你的页脚

@Dev 我尝试为 Sub Footer 元素添加 .sticky .bottom-0 但整个容器的高度仍然大于屏幕。如果我从内容中删除一些文本内容使其不会溢出，整个布局看起来很好，我可以在一个屏幕中看到页眉、子页眉和子页脚。

【参考方案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

【讨论】：

谢谢你，它解决了问题，你想给出一些关于修复的逻辑吗？并指出我的错误是什么？ -- 比如sidebar和rightbar不需要h-full和flow，或者max-h-screen不在container上的原因？

您可以将 max-h-screen 放在最外面的 container 上，但是您也必须将 h-full 添加到它的子元素中。因此，我会在想要完整视口高度而不是祖父母的父母上使用它。当然有很多方法。