页脚内容

我无法将页面划分为header,content和footer。我在这里关注了一个关于stackoverflow的主题。但是，当我尝试向内容部分添加任何内容时，我的所有内容都显示在footer元素的下方。到目前为止，这是我的代码。页脚内容

任何人都可以解释我做错了什么，背后的原因是什么？

HTML

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     //Removed 
    </head> 
    <body> 
     <div class="main-wrapper"> 
      <header> 
       <?php 
       require('header.php'); 
       ?> 
      </header> 
      <section class="page-content"> 
       yeah 
      </section> 
      <footer> 
       <?php 
       include('footer.php'); 
       ?> 
      </footer> 
     </div> 
    </body> 
</html>

这里是我的CSS

body, html { 
    width: 100%; 
    height: 100%; 
    background: #ddd; 
    padding: 0; 
    margin: 0; 
    } 

    .main-wrapper { 
    box-sizing: border-box; 
    min-height: 100%; 
    padding: 0; 
    position: relative; 
    } 

    article { 
    background-color: white; 
    } 

    footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background-color: #555; 
    height: 55px; 
    } 
    .page-content { 
    width: 100%; 
    height: 100%; 
    } 

    .nav-bar { 
    width: 100%; 
    background: white; 
    text-align: center; 
    }

的页面内容出现下面的页脚，甚至当我设置它的位置，以绝对的。我究竟做错了什么？谢谢你的帮助。

来源

2016-08-18 davidb

尝试删除'高度：100％;'从页面的内容？它可能试图填充整个页面包装器空间。 – DrSatan1

您应该添加

<div style="clear:both;"></div>

的部分和页脚标签之间

，并看看是否有帮助

来源

2016-08-18 20:36:48 DomGato

嗨，只是资金，我的标题有问题。我使用php添加它。但是，当我删除的PHP代码，只需键入任何文本，然后它的作品。我想我需要解决这个问题。它应该没有错，但它。不管怎么说，还是要谢谢你。 – davidb

嘿，很高兴听到你想出了标题问题。至于PHP，你有没有仔细检查你正在使用的PHP代码？也许有一个标签没有关闭或沿着这些线。 – DomGato

.page-content { 
    box-sizing:border-box; 
    padding:0 0 55px; /* make space for footer */ 
}

来源

2016-08-18 20:47:35 Maju

回答

相关问题