フッターの下のコンテンツ

ページをheader,contentおよびfooterに分割する際に問題があります。私はここでstackoverflowのトピックの1つを追跡しました。しかし、コンテンツ部分に何かを追加しようとすると、すべてのコンテンツが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

フッターの下のコンテンツ

答えて

関連する問題