Question

即使页面中的内容不足，如何将页脚固定在屏幕底部？我的意思是当页面为空时，页脚跳起来占据屏幕的一半

我尝试将内容高度设置为屏幕大小的100％，减去标题和高度的高度。页脚，具有以下内容：

#main {
min-height: calc(100% - 80px - 70px);
}

但是100％等于0px，因为内容（嵌套在#main中）是空的

如何从100％中取出？

我在wordpress.org上问了同样的问题，他们指示我这个问题

价： https://wordpress.org/support/topic/fix-footer-to-the-bottom-of-screen/

Image

Answer 1

我不确定，但你可以尝试一下，让我知道它是否有效

.footer{
top: 100vh;
transform: translate(-100%,0);
position:fixed;
}

Answer 2

将css应用于页脚：

.footer-wrapper{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}

对于包装器，

#wrapper, #main{
 position: static !important;
}

Answer 3

一劳永逸地在底部设置页脚的最佳，最简单的方法如下！

1-在CSS中创建div内容并提供以下属性

.content{ min-height: 100vh}

2-在您的worpress页面模板中添加此

<div class="content"> place all your content inside this div or your loops   </div>

如果您想知道添加此模板后页面模板的外观，请参见完整示例

<?php get_header();?>


<div class="container>
    <div class="content">
        
        <?php if (has_post_thumbnail()):?>
    
          <img src="<?php the_post_thumbnail_url('largest');?>" class="img-fluid">
    
        <?php endif;?>
        
        
        <?php if (have_posts()) : while (have_posts()) : the_post();?>
    
            <?php the_content();?>
    
        <?php endwhile; endif;?>
    
    
    </div>

</div>


<?php get_footer();?>

完成此操作后，即使页面为空，也没有多余的空间或其他任何内容，页脚将始终停留在底部！

享受

在Wordpress中将页脚固定到页面底部

3 个答案: