Sticky Header and Footer

Question

我用尾风CS, 面对一个问题与编脚。

<强 > base.html

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

    {% block content %}
    {% endblock %}

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

< 强力 > footer.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>

我试过静态,绝对,固定,固定,相对... 但是.固定覆盖的内容块和相对的脚脚向上移动。或.mb-0,. 底部-0 无效。

能否在底部固定脚脚?

Answer 1

<div class="flex flex-col h-screen justify-between">
  <header class="h-10 bg-red-500">Header</header>
  <main class="mb-auto h-10 bg-green-500">Content</main>
  <footer class="h-10 bg-blue-500">Footer</footer>
</div>

无需在 < code > 类别中为 < code > 说明理由,但我将离开他(其他情况)。

所以,玩到 h-screen 和 mb-auto 类。

你得到这个UI:

Answer 2

另一种办法是使用 " 强力 " 软体生长

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>

<div class="flex flex-col h-screen">
    <div class="bg-red-500">header</div>
    <div class="bg-green-500 flex-grow">content</div>
    <div class="bg-blue-500">footer</div>
</div>

Answer 3

2022年的新溶液尾风3.0.24版本代码演示

<div class="min-h-screen">
  <div>Content</div>
  <div class="sticky top-[100vh]">Footer</div>
</div>

将 top-[100vh] 替换为 top-full 也有效。前者变成 top: 100vh ,后者是 top: 100/code> 。

"https://codepen.io/shrekuu/pen/zYRovQa" rel="无跟随 nofoln noreferrer" >codpen demo

Answer 4

固定使用而非静态

class="固定的底部-0"

Answer 5

最近由“https://www.twitter.com/silvior_" rel="noreferrer" >Sílvio Rosa 使用 position: sticky +top:100vh 在页脚上发现的另一个方式。实现这一点的方法是 < 坚固> TailWindCSS 。

<html class="min-h-screen">
  <body class="min-h-screen">
    
    <header>Header</header>
    <main>Content</main>
    <footer class="sticky top-[100vh]">footer</footer>

  </body>
</html>

您可以阅读关于CSS Tricks "的整篇文章“https://css-tricks.com/a-clever-sticky-foter-technique/"rel="nreferr">这里

Answer 6

Sticky Header and Footer

无论内容和屏幕大小 , < 坚固 > 页眉和页脚 < 坚固 > < 不论内容和屏幕大小 < /坚固 >,请这样做:

<div class="flex flex-col h-screen">
    <div class="sticky top-0 z-50">header</div>
    <div class="grow">content</div>
    <div class="sticky bottom-0 z-50">footer</div>
</div>

Answer 7

由于我的组件不是布局组件,所以这里的解决方案对我毫无用处。我希望一个粘贴的脚脚只出现在单页上,它需要忽略母容器的边际和垫子。这里的尾风解决方案对我有效:

<div className="fixed bottom-0 left-0 bg-red-500 w-screen h-12">
  Sticks to bottom, covers width of screen
</div>

Answer 8

不使用差值的解决方案 :

.as-console-wrapper {
  display: none !important; /* just to hide stackoverflow console warning */
}

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex flex-col min-h-screen">
  <header class="bg-yellow-600">content</header>
  <div class="bg-blue-600">content</div>
  <div class="flex-1"></div> <!-- here -->
  <footer class="bg-red-400">footer</footer>
</div>

另一个聪明的解决方案是脚脚使用 sticky top-[100vh] 。 < a href="https://css-tricks.com/ a-cliver-stady- foter-technique/" rel="不跟随 noreferrer" by Chris Coyier

.as-console-wrapper {
  display: none !important; /* just to hide stackoverflow console warning */
}

<script src="https://cdn.tailwindcss.com"></script>

<div class="min-h-screen">
  <header class="bg-yellow-600">content</header>
  <div class="bg-blue-600">content</div>
  <footer class="bg-red-400 sticky top-[100vh]">footer</footer>
</div>

Answer 9

我用的是这个:

<div class="min-h-screen flex flex-col justify-start">
   <div>your main content</div>
   <footer class="mt-auto">
      <div>your footer content</div>
   </footer>
</div>

Answer 10

虽然我很久以来避免使用 display: great ,但使用它似乎是迄今为止最简单的解决方案(与灵活框解决方案相比):

<script src="https://cdn.tailwindcss.com"></script>

<!-- Wrapper element ( display: grid ,  grid-template-rows  defined) -->
<div class="min-h-screen grid grid-rows-[min-content_1fr_min-content] ">
  <header class="bg-blue-200">Header</header>
  
  <!-- Content element (display: grid) -->
  <main class="grid bg-blue-300">Content</main>
  
  <footer class="bg-blue-400">Footer</footer>
</div>

有两个要点:

grid-rows-[...] 已经应用到包装元素 ¹。考虑到 grid-rows ,必须使用任意的数值(Tailwind v3只提供均衡分布的行)。所有可用空间都需要有 >1fr 值的元素;其余部分由你决定( min-content 可能是最好的选择)。
包含所有可用空间的元素需要有 grid 类。

1 1 备选,而不是 >min-h-screen ,而是可以使用 h-full ,但需要从开始,适用于包装元素的 all 。

它实际上比“强”说 " /强 " 容易得多。请看上面的例子。

Answer 11

最近我感到非常痛苦。我最后在没有flex 的情况下解决了这个问题,我只给我的身体一个75vh的分身,这似乎产生了预期的结果。

Answer 12

我所看到的最好的答案是设置装有脚脚的容器,检查高度(min-h-screen),使它变成一个弹性箱(伸缩),将脚脚上的元素设为伸缩1,这样它就可以消耗所有空间,推下脚脚。

在你的代码中,它看起来像这些:

<body class= flex flex-col min-h-screen >
    {% include "partials/nav.html" %}
    <div class= flex-1 >
      {% block content %}
      {% endblock %}
    </div>
    {% include "partials/footer.html" %}
</body>

Here s a sample code for my use-case:

<div className= flex flex-col min-h-screen >
  <div className= flex-1 mx-24 mt-12 >
    <Header />
    <div className= grid grid-cols-4 gap-12 my-12 >
      {data.map( (item, i) => <Todo key={i} title={item.title} note={item.note} texts={item.texts}/>)}
    </div>
  </div>
  <Footer />
</div>

Answer 13

根据尾风文件,我使用了position like this:

<body>
  <div class="static min-w-full min-h-screen p-1">
    <p>content<p>
    <div class="absolute bottom-0 min-w-full">
      <p>foot</p>
    </div>
  </div>
</body>

static and absolute allow to position child (footer) relatively to parent (content)
min-h-screen tells the parent is as high as the screen
bottom-0 tells footer must be at the bottom of the parent

Answer 14

比我所看到的简单得多。这里有一个粘贴页眉和粘贴页脚。无论内容多高, 总是可以看到 :

<>
  <div className="sticky top-0 min-w-full">Header</div>
  <div className="min-w-full min-h-screen">SOME CONTENT</div>
  <div className="min-w-full min-h-screen">SOME CONTENT</div>
  <div className="fixed bottom-0 min-w-full">Footer</div>
</>

Answer 15

在您的布局组件中的第一个 < strong > > div 上使用 -[100vmin] 自定义类,通常如下:

<Layout>
  <div class="container">
    <div class="h-[100vmin]">
      ...
    </div>
  </div>
</Layout>

Answer 16

<footer class="absolute bottom-0 w-full px-6 py-6 text-white bg-emerald-500">

我想您可以使用 absolute foot-0 来定位它, w-full 来填充宽度, px 和 py 来缩放页脚。

Answer 17

为了避免在上打破 bg 梯度 :

<main class="min-h-screen"></main>

Answer 18

在您主内容容器中使用了 < code> flex- grow 。

<!-- Sticky Footer Wrapper -->
<div class="flex flex-col min-h-screen justify-between">

    <header class="p-4 bg-indigo-100">
        Header
    </header>

    <main class="flex-grow p-4 bg-amber-100">
        <section>
            <p class="h-20 outline">SHORT Content</p>
            <!-- <p class="h-[1000px] outline">LONG Content</p> -->
        </section>
    </main>

    <footer class="p-4 bg-rose-300">
        Footer
    </footer>

</div>

Sticky Header and Footer

友情链接