Question

似乎我不能让我的粘性页脚起作用！我查看了多个stackoverflow文章以及一些示例，但无法得到相同的结果。

编辑：我不希望页脚被修复。我希望它在屏幕的底部，如果内容不足以将其推下来，如果它被推下来然后让它。

以下是我的完整CSS代码：http://collabedit.com/wegv8

这是我的相关CSS代码：

html,
body {
  height: 100%;
}

.wrap {
  min-height: 100%;
  height: auto;
  margin: 0 auto -42px;
  padding: 0 0 42px;
}

footer {
  height: 42px;
}

相关的HTML：

<?php get_header(); ?>

    <div class="row wrap">

        <div class="col-sm-12 blog-main">

            <?php
            if ( have_posts() ) : while ( have_posts() ) : the_post();

                get_template_part( 'content', get_post_format() );

            endwhile; endif;
            ?>

        </div> <!-- /.blog-main -->

        <?php get_sidebar(); ?>

    </div> <!-- /.row -->

<?php get_footer(); ?>

最好在http://whatloop.com/wpTheme/just-another-page/

查看

Answer 1

对于你的页脚，你似乎想要添加这样的东西：

.pagination {
      margin: 0;
      padding: 0;
    }


.pagination li {
  display: inline;

  border: 1px solid #ddd;
  margin-right: -1px;
  font: 13px/20px Arial, Helvetica, sans-serif;
  background: #FFFFFF;
}

.pagination li a {
  text-decoration: none;
  padding: 6px 10px 6px 10px;
  color: rgb(89, 141, 235);
}

.pagination li.first {
  border-radius: 5px 0px 0px 5px;
}

.pagination li.last {
  border-radius: 0px 5px 5px 0px;
}

.pagination li:hover {
  background: #EEE;
}

.pagination li.current {
  background: #89B3CC;
  border: 1px solid #89B3CC;
  color: #FFFFFF;
}

这将确保您的页脚在滚动时无所不在，并重叠滚动的页面内容。

希望这有效！

Answer 2

在blog-masthead

之后在container上添加一个班级

应用此css

.className{
  min-height: calc(100% - 247px);
}

Answer 3

将您的页脚css更改为此。

footer {
height: 42px;
bottom: 0;
position: fixed;
width: 100%;
}

或将此添加到您的博客页脚类

bottom:0;
position:fixed;
width:100%;

粘滞的页脚没有移动到底部和页面太长

3 个答案: