相关疑难解决方法(0)

Tailwindcss：底部的固定/粘性页脚

我使用 tailwindCSS 并遇到制作页脚的问题。

基本文件

  <body>
    {% include "partials/nav.html" %}

    {% block content %}
    {% endblock %}

    {% include "partials/footer.html" %}
  </body>

Run Code Online (Sandbox Code Playgroud)

页脚.html

<footer class="w-full h-64 bg-gray-900 static bottom-0">
        {% load static %}
        <img src="{% static "images/logo_white.png" %}" width="70px"> <p class="text-white"> &copy~~~~~~</p>
</footer>

Run Code Online (Sandbox Code Playgroud)

我尝试了静态、绝对、固定、相对...但是 .fixed 覆盖了内容块，并且相对使页脚向上。或 .mb-0、.bottom-0 不起作用。

是否可以将页脚固定在底部？

django tailwind-css

dho*_*onk

2021 04-29

29
推荐指数

8
解决办法

3万
查看次数

TailwindCSS：如何将页眉和页脚固定到屏幕，同时保留其间的可滚动内容？

我正在使用 Tailwind CSS 为客户端创建一个 React PWA，我想要实现一个布局，其中标题固定在屏幕顶部，导航栏固定在屏幕底部。在两者之间，我将显示动态大小的可滚动内容。

我一天的大部分时间都在努力解决这个问题，并且我正在按照此答案的说明以及此处提供的代码进行操作。

我虽然明白了，因为我在相关组件中实现了所有推荐的类，并且在浏览器开发工具上得到了这个结果：

然而，我很好奇，决定在手机上打开该页面。这是结果，正如您所看到的，所需的元素实际上都没有固定到屏幕上：

此时我完全迷失了。我尝试className={fixed}在导航栏中使用，但即使向导航栏或内容添加边距或填充，它最终也会剪切部分内容。

如何将标题和导航栏固定到屏幕上，同时保持内容可滚动？

这些是我的代码的相关部分：

应用程序.js：

function App() {
    return (
        <Router>
            <div className='flex flex-col h-screen overflow-hidden'>
                <Header></Header>
                <div className='MainContent flex-1 overflow-y-scroll py-2 mx-2'>
                    <Routes>
                        <Route path="/" element={<OrderView />} />
                        <Route path="/DeliverymenView" element={<DeliverymenView />} />
                        <Route path="/InventoryView" element={<InventoryView />} />
                        <Route path="/RouteGenerationView" element={<RouteGenerationView />} />
                        <Route path="/AdministrativeView" element={<AdministrativeView />} />
                        <Route path="*" element={<ErrorView />} />
                    </Routes>
                </div>
                <Navbar></Navbar>
            </div>
        </Router>
    );
}

Run Code Online (Sandbox Code Playgroud)

标头.js：