粘性頁腳不移動到底部和頁面太長

看來，我無法讓我的粘腳上班！我已經看過多個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！這種方法大大擴展了黑盒子，但沒有移動它。 –

粘性頁腳不移動到底部和頁面太長

回答

相關問題