ページの下部にフッターが表示されるか、下に表示されるコンテンツのうち小さい方が表示されます

Question

私は見て見てきましたが、これで解決できる解決策を見つけることができませんでした。私は固定ヘッダーと、コンテンツで展開したい2つの列を持ちますが、コンテンツが少ない場合は完全高さにしたいと考えています。次に、コンテンツの下（ロットのとき）またはページの下部に表示したいフッター。下のHTML/CSSでは、フッタは表示画面の外に表示されますが、さらに悪いことに、何らかの理由で画面を押し出すのに十分なテキストがあれば、フッターは消えます！

編集：私はそれを理解しました。わーい！！次のステップに進みます。

HTML - EDITED

<header> 
    <div class="fixed-top"> 
     <div style="height: 10px; background: #27AAE1;"></div> 
     <div id="Top_Bar" class="row"> 
      <div class="col-sm-2"> 
       <a><img src="images/nmdlogo.png" height=80px;></a> 
      </div> 
      <div class="col-sm-10"> 
      <h1 "text-align=center";>Admin Panel</h1> 
      </div> 
     </div> 
     <div style="height: 10px; background: #27AAE1;"></div> 
    </div> 
</header> 

<main class="Site-content"> 
    <div class="container-fluid h-100"> 
     <div class="row h-100"> 
      <div id="Menu_Panel" class="col-sm-2"><!-- Left Side Menu Area --> 
      Menu 
      </div><!-- End of col-sm-2 Left Side Menu Area --> 

      <div id="Main_Panel" class="col-sm-10"><!-- Main Area --> 
      Main Panel<br> 
      </div><!-- End col-sm-10 Main Area --> 
     </div><!-- End of Row --> 
    </div><!-- End of Container -->   
</main> 

<footer> 

      <div class="customHr"></div> 
      <div class="col-sm-10 offset-sm-2"> 
       <span>Text Here</span><br> 
       <a style="color: white; text-decoration: none; cursor: pointer; font-weight: bold;" href="#">Link Name</a> 
      </div> 
      <div class="customHr"></div> 
      <div style="height: 10px; background: #27AAE1;"></div> 

</footer> 

CSS -

.Site { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
    background-color: #2f4050; 
} 

.Site-content { 
    flex: 1; 
    margin-top: 120px; 
} 
#Menu_Panel{ 
    background-color: #d10e1e; 
} 
#Main_Panel{ 
    background-color: #ffffff; 
} 

#Top_Bar{ 
    text-align: center; 
    color:#ffffff; 
    img-align: center; 
    background-color: #2f4050; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

footer { 
    color:#ffffff; 
    text-align: center; 
} 
.customHr { 
    border-bottom: 1px solid #9fb1c2; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    font-size: .8em; 
    padding-top: 5x; 
    padding-bottom: 5px;  
} 

Answer 1

を編集しました、私はあなたがよりあなたのページの下部にこだわっフッターを探しているの想像？ 編集：（あなたの元に基づいて） 次のCSSを使用すると、ページの一番下にそれを固執し、しかし長いコンテンツがちょうどその背後に、過去にスクロール

* { 
      margin: 0; 
     } 

     html { 
      height: 100%; 
      box-sizing: border-box; 
     } 

     *, 
     *:before, 
     *:after { 
      box-sizing: inherit; 
     } 

     body { 
      background-color: #2f4050; 
      position: relative; 
      margin: 0; 
      padding-bottom: 6rem; 
      min-height: 100%; 
     } 

     #Menu_Panel { 
      background-color: #d10e1e; 
      margin-top: 120px; 
     } 

     #Main_Panel { 
      background-color: #ffffff; 
      margin-top: 120px; 
     } 

     #Fixed_Top { 
      position: fixed; /* Set the navbar to fixed position */ 
      top: 0; 
     } 

     #Top_Bar { 
      text-align: center; 
      color: #ffffff; 
      img-align: center; 
      background-color: #2f4050; 
      padding-top: 10px; 
      padding-bottom: 10px; 
     } 

     .footer { 
      color: #ffffff; 
      text-align: center; 
      width: 100%; 
      position: absolute; 
      right: 0; 
      bottom: 0; 
      left: 0;   
     } 

     .customHr { 
      border-bottom: 1px solid #9fb1c2; 
      margin-top: 10px; 
      margin-bottom: 10px; 
      font-size: .8em; 
      padding-top: 5x; 
      padding-bottom: 5px; 
     }