粘性页脚不移动到底部和页面太长

看来，我无法让我的粘脚上班！我已经看过多个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/

来最好看

来源

2017-04-27 Brydon McCluskey

改变您的页脚的CSS将这个CSS用于此。

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

或添加到您的博客尺类

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

来源

2017-04-27 05:22:49

嗨拉夫拉夫，我不希望它被修复。如果页面与我链接的页面相似，我希望它位于屏幕的底部，但如果页面很长，就像通常那样坐在底部。 –

尝试在您的博客页脚类 position：absolute; 宽度：100％; bottom：0; left：0; right：0; –

太近了！但它不会向下滚动，它只会停留在底部并停留在那里。 –

看起来对于你的页脚，你需要添加如此mething这样的：

position: fixed; 
z-index: 1000;

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

希望这个作品！

来源

2017-04-27 05:12:12 TCharb

嘿TCharb，感谢您的评论，但我不希望它被固定。我希望它在屏幕的底部不会被推下，但是如果它被推下来然后放开它。 –

上blog-masthead添加一个下课container

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

来源

2017-04-27 05:15:06

嗨Laljii！这种方法大大扩展了黑盒子，但没有移动它。 –

粘性页脚不移动到底部和页面太长

回答

相关问题