Question

我需要修复我的粘性页脚，由于某种原因它现在正在工作。我不知道为什么。我在这里关注这个例子： Bootstrap Sticky Footer

我添加到我的页脚位置：绝对;并且在示例页面上这是有效的，并且页脚没有停留在我调整浏览器大小的相同位置。但是，在我的例子中，页脚始终位于屏幕的底部，我知道位置是如何工作的，但为什么在我的情况下，位置不像示例那样。我正在使用Wordpress，以及带有bootstrap 3的Sage主题。在这里你可以看到这个例子： My example page.

P.S。

以下是页面正文的代码：

<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;
}

Answer 1

你应该使用positio fixed（非绝对）

 .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%;
}

但如果您不希望页脚位于底部，则可以使用相对

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

粘性页脚不能使用绝对位置

1 个答案: