admin管理员组

文章数量:1332339

As described in the title, I'm simply trying to create a bottom navigation. Here's my code within the body:

...
<body>
<div class="h-screen flex flex-col flex-nowrap overflow-y-hidden">
    <div class="flex-1 flex flex-col justify-center items-center overflow-y-auto">
        <p>Here's my page content.</p>
    </div>
    <div class="flex flex-row gap-2 w-full bg-primary-700 p-2 justify-center">
        <button class="text-gray-300">
            {% include 'icons/database.svg' %}
        </button>
        <button class="text-gray-300">
            {% include 'icons/database.svg' %}
        </button>
        <button class="text-gray-300">
            {% include 'icons/database.svg' %}
        </button>
    </div>
</div>
</body>

On desktop displays, it works fine and the nav shows up at the bottom and the contents of the div with 'flex-1' are scrollable. However, the bottom nav disappears for mobile displays. I'm stumped because as far as I know, this should work on mobile if the same rules work perfectly fine on desktop but I'm not sure what I'm missing. Any help appreciated.

本文标签：

版权声明：本文标题：html - I&#39;m trying to create a sticky bottom navigation for mobile using Tailwind CSS and Flex Box, but it isn&#39;t 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742329800a2454460.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。