Home / Questions / 10757
Accepted
Lucas. D
Asked: 2020-05-24 10:34:19 +0800 CST 2020-05-24 10:34:19 +0800 CST

位置页脚总是粘在页脚上

  • 772

各位下午好！我已经搜索了半个小时，但没有找到任何对我有用或给我带来积极结果的东西。我有一个数据透视表，它根据从 DropDownList 中选择的内容更改要显示的行数。问题在于，对于表格中的行数很少的情况，页脚不合适，如下所示，它没有正确地“卡”在页脚上。

在此处输入图像描述

我已经尝试过使用 position 属性，其他我从未听说过但我无法让页脚始终粘在页脚上。目前，这就是我的 CSS 中的内容；

footer
{
    margin-top:50px;
    width:100%;
    height:200px;
    background-color:red;
}

从已经非常感谢了！

html

9 Answers

  1. Best Answer

    您可以“向下推”页脚，这样当表格非常大时它不会覆盖它，但是当它非常小时，页脚会停留在底部。

    我给你举个例子

    注意：全屏运行代码片段，以便更好地查看结果。

    html {
  min-height: 100%;
  position: relative;
}
body {
  margin: 0;
  margin-bottom: 40px;
}
footer {
  background-color: black;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  color: white;
}
    <table>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
</table>
<footer>
  Footer
</footer>

    如果表格很大，页脚会调整到页面的高度，而不是覆盖它。

    html {
  min-height: 100%;
  position: relative;
}
body {
  margin: 0;
  margin-bottom: 40px;
}
footer {
  background-color: black;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  color: white;
}
    <table>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
</table>
<footer>
  Footer
</footer>

    • 36

  2. 您应该将位置设置为固定，将左侧和底部设置为 0，以便将其固定在页面的左下方：

    #footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}
    <div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div id="footer">Pie de página</div>

    • 10

  3. 您可以使用 Bootstrap，包括头部的库并将类添加.navbar-fixed-bottom到页脚，如下所示：

    class="navbar navbar-fixed-bottom"

    最后，以您放置的主体样式：

    body { padding-bottom: 70px; }

    这将是非常好的。

    PS：bootstrap 库不仅有这个用处，它在美观方面也有很多优势。

    • 5

  4. 我遇到了同样的问题，除了使用 Flexbox 之外无法修复它。

    这个话题相对简单（一旦你已经给出了一半的答案）。假设我们有一个由 HEADER、BODY 和 FOOT 组成的结构。

    <body>
 <div class="cabecera"></div> <!-- header -->
 <div class="cuerpo"></div> <!-- main -->
 <div class="pie"></div> <!-- footer -->
</body>

    为此，我们将通过以下方式分配 Flexbox 的属性“display: flex”：

    body { // El body (o cualquier otro <div>) hace de "contenedor padre"
  display: flex;
  flex-direction: column;
}

    例如，假设 HEADER 和 FOOTER 的指定大小为：

    .cabecera, .pie {
  height: 10em;
  background-color: grey;
}

    现在，我们可以为 BODY 添加一个独特的功能来发挥作用：

    .cuerpo {
  flex-grow: 1; // En este caso CUERPO se comporta como "elemento hijo"
  background-colour: #333333;
}

    通过这种方式，我们将剩余的高度赋予 BODY 中的内容，无论它是什么高度，它都会将 PIE 推向屏幕底部。

    • 3

  5. 好..包含它的实用方法是..

    拥有 footer.php 文件

    ?php
    echo "<footer> Copyright &copy; "  . date("Y") ." -   tudireccion.com </footer>";
?>

    使用 style.css 属性

    /* Pie de pagina*/
footer {
        text-align: center;
        font-family: sans-serif;
        color: whitesmoke;
        width: 100%;
        bottom: 0;
        position:fixed;
    }

    并从任何页面调用它......

    <?php include 'footer.php'; ?>

    我希望它已经服务了，问候..

    • 2

  6. 我不知道它是否有效，但我找到了一个很好的解决方案，你必须使用相对位置......

    footer #pie_pagina {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 300px;
    background-color: black;
}
    • 2

  7. 如果你想要这里是github的链接

    我通过以下方式解决了它：

    <body>
    <div>
        <!-- Navigation -->
        <nav class="nav">
            <img src="icono.png" alt="" class="nav__logo"></a>
            <span class="nav__title">Navigation</span>
            <ul class="nav__ul">
                <li class="nav__li"><a href="#">Inicio</a></li>
                <li class="nav__li"><a href="#">Pepes</a></li>
                <li class="nav__li"><a href="#">Jaimes</a></li>
            </ul>
        </nav>
    </div>
    <div>
        <section class="content">
        </section>
    </div>
    <div>
        <!-- Footer -->
        <footer class="footer">
            <p class="footer__p">
                &copy; Copyright 2020 &copy; <a href="#">Pingui Studio</a>
            </p>
        </footer>
    </div>
</body>

    我做了一个新的容器，它可以放在里面，在你的情况下，它就是桌子，一旦你有了我给navand to的样式footer，它应该nav占据宽度和3.5 em高度100vw，并且它被粘在放置0de的上方margin，footer我放了，position relative bottom 0但是这样做是它根据页面的流程定位它，所以如果在上传页脚的内容中没有写任何内容，这就是你的情况，那么你必须执行以下操作: 为将要出现的内容添加一个类，.content然后给它一个min-heightfrom77.6vh或任何适合您页面的内容

    /* Content */
.content {
    background-color: #ffffff;
    margin: 1em;
    min-height: 77.6vh;
    padding: 1em;
}

    就是这样，如果您在内容中放置更多元素，页脚将下降，如果没有内容，则该框将保留在 77.6vh 中，因为它具有 min-hight 属性。

    • 1

  8. 固定位置后，如果这是您想要的，它将始终在底部可见：

    footer{
    position: fixed;
    bottom: 0;
}
    • 0

  9. 一个非常简单的方法是按footer百分比放置大小，例如：

    footer {
   padding: 10%;
}
    • -1