响应式页脚在移动设备上居于首位； 坚持到底在手机模拟器和台式机上？

Question

最近部署了带有最少插件的响应式Word Press模板。 页脚可在手机模拟器和台式机上使用。 在实际设备上，它会拍摄到内容上方标题的正下方。 我希望页脚坚持到底。

我的mobiel测试设备是nexus 5（1080p）。

我尝试用通常的建议更改页脚，但对两者均无效。 我什至关闭了确定移动设备的php功能，但仍然无法正常工作。

这是页脚CSS

这是响应式CSS和php代码

    if ($px_theme_option['responsive'] == "on") {
                    echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">';
                    wp_enqueue_style('responsive_css', get_template_directory_uri() . '/css/responsive.css');

CSS（响应式.css中的相关页脚类）

/*============      Media 768Px Start   ============ */
@media (min-width: 768px) and (max-width: 979px) {


    #footer{
            overflow:hidden;
        }

/*============      Media 420Px Start   ============ */
@media (max-width: 767px) {
    #footer{
        height:67px;
}
    #footer p{
        margin:0 0 0 10px;
    }
    #footer{
        overflow:hidden;
    }


/*============      Media 300Px Start   ============ */
@media (max-width: 480px) {

#footer{
        height:120px;
    }
    #footer p{
        margin:0;
        padding:0px 44px 0px 0px;
    }   

可能是相关的，新闻文章在最上面，并且涵盖了它们。 我认为这是在下面拍摄的，并且没有用（因为我在世界各地的报纸和页面上切换了一些类别？）。

.news-section article figure{
    height:100%;
    }
    #footer p{
    margin:0 0 0 10px;
}


    #footer{
        overflow:hidden;
    }
/*============     Media 940Px Start    ============ */
@media screen and (min-width: 900px) and (max-width: 1054px){

    #footer{
        overflow:hidden;
    }

默认值（我假设使用台式机，因为它位于单独的style.css文件中）

  #footer {
        max-width: 1160px;
        margin: 0 auto;
        background: #141414;
        position: relative;
        z-index: 99;
        height: 56px;
        font-size: 0;
        line-height: 0;
        padding-top: 17px;
        border-top: 10px solid #0c0c0c;
        box-shadow: -10px 10px #141414,10px 10px #141414 ;
    }
    #footer p {
        float: left;
        line-height: 25px;
        margin: 0 0 0 35px;
        font-size: 11px;
        color: #555;
        font-style: normal;
    }

页脚HTML

      </div>
            </div> 
        </div>
        <!-- Inner Main -->
    </div>
    <footer id="footer">
        <p class="coptyright">
            <?php echo do_shortcode(htmlspecialchars_decode($px_theme_option['copyright'])); ?>  
            <?php echo do_shortcode(htmlspecialchars_decode($px_theme_option['powered_by'])); ?>
        </p>
        <?php
            if($px_theme_option['footer_social_icons'] == 'on'){
                px_social_network();
            }
        ?>
        <a href="" class="btn btngotop"><i class="fa fa-arrow-circle-o-up"></i></a>
    </footer>
</div>
<!-- Wrapper End -->
<?php 
px_footer_settings();
wp_footer();?>
</body>
</html>

Answer 1

尝试添加

clear:both

这应该将其保持在底部。