粘性页脚不适用于绝对位置

Posted 2023-03-06

技术标签:

【中文标题】粘性页脚不适用于绝对位置【英文标题】：Sticky footer not working with absolute position 【发布时间】：2016-07-07 06:56:42 【问题描述】：

我需要修复我的粘性页脚，由于某种原因它现在可以正常工作。我不确定为什么。我正在按照这里的示例进行操作： Bootstrap Sticky Footer

我已经添加到我的页脚位置：absolute;并且在示例页面上这是有效的，并且页脚没有停留在我调整浏览器大小的相同位置。但是，在我的示例中，页脚始终位于屏幕底部，并且我知道该位置是如何工作的，但是为什么在我的示例中该位置的行为不像示例之一。我正在使用 Wordpress 和带有 bootstrap 3 的 Sage 主题。在这里您可以看到示例： My example page.

附言

这是页面正文的代码：

<body  <?php body_class(); ?>>

    <!--[if IE]>
      <div class="alert alert-warning">
        <?php _e('You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.', 'sage'); ?>
      </div>
    <![endif]-->
    <?php
      do_action('get_header');
      get_template_part('templates/header');
    ?>

    <div class="wrap container" role="document">
      <div class="content row">
        <main class="main">
          <?php include Wrapper\template_path(); ?>
        </main><!-- /.main -->
        <?php if (Setup\display_sidebar()) : ?>
          <aside class="sidebar">
            <?php include Wrapper\sidebar_path(); ?>
          </aside><!-- /.sidebar -->
        <?php endif; ?>
      </div><!-- /.content -->
    </div><!-- /.wrap -->

    <?php
    do_action('get_footer');
    if (!is_front_page())
      get_template_part('templates/footer');
    
    wp_footer();
    ?>


  </body>

这里是css：

body 
    margin: 0;
    margin-bottom: 100px;



.biserka-footer 
    background-color: #3b3b3b;
    color: white;

    width: 100%;
    height: 13rem;
    clear:both;

    font-size: 0.8em;

    position: absolute;
    bottom: 0;

【问题讨论】：

请将代码添加到您的帖子中，这将增加您获得帮助的机会。感谢您的评论，我已添加代码。 【参考方案1】：

你应该使用固定的位置（不是绝对的）

 .biserka-footer 
   background-color: #3b3b3b;
   bottom: 0;
   clear: both;
   color: white;
   font-size: 0.8em;
   height: 13rem;
   position: fixed;  /* fixed and not absolute */
   width: 100%;

但如果你不想让页脚在底部，你可以使用 relative

 .biserka-footer 
   background-color: #3b3b3b;
   bottom: 0;
   clear: both;
   color: white;
   font-size: 0.8em;
   height: 13rem;
   position: relative;  /* relati */
   width: 100%;

【讨论】：

嗯，固定位置始终将页脚留在底部。而且我希望内容能推到页脚，如果内容没有占据整个屏幕就留在底部。如果我使用relative，页脚不固定在底部，在这种情况下我需要使用一些push div吗？请在此处查看我的截图：prnt.sc/ahspld 只是想插话说这对我有用。似乎粘性页脚的示例 Bootstrap 3 建议您使用 absolute 而不是 fixed。使用 fixed 可以让一切都很好。

以上是关于粘性页脚不适用于绝对位置的主要内容，如果未能解决你的问题，请参考以下文章