下のhtmlプルーフとフッタ

Question

私はブートストラップとCSSでかなり新しいです。まず、私が書いたコードが正しいかどうかを知りたい。より多くのコンテナで作業しても問題ありませんか？ヘッダーとフッター（幅100％vw）用の流体容器と内容の標準容器を使用します。

第2に、私のフッターをコーディングする最良の方法は何か分かりません。私はページの下部にそれを必要としますが、絶対位置で固定されていません（私はブラウザのウィンドウで固定したくありません）。 私はsuccedingせずに別のソリューションを試しました。私の容器を別の容器に入れようか？

ありがとうございました。申し訳ありませんが、私が完全に説明しなかった場合、または何も見逃しました。あなたがあなたのウェブサイトを持っているコンテンツよりもはるかに大きいスクリーンを使用して、視聴者が心配している場合は

<div class="container"> 
    <div class="row"> 
     <div clas="col-xs-12"> 
      <nav class="navbar navbar-default navbar-fixed-top"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 

        </button> 
        <div class="navbar-brand no_margins"> 
         <img src="images/logo.png" alt="logo"> 
        </div> 
       </div> 

       <div class="collapse navbar-collapse"> 
        <ul class="nav navbar-nav navbar-right"> 

         <li class="active"> 
          <a href="#"> 
           About 
          </a> 
         </li> 
         <li> 
          <a href="#"> 
           Works 
          </a> 
         </li> 
         <li> 
          <a href="#"> 
           News 
          </a> 
         </li> 
         <li> 
          <a href="#"> 
           Contacts 
          </a> 
         </li> 


        </ul> 


       </div> 
      </nav> 
     </div> 
    </div> 
</div> 
<!-- close container navbar--> 

<!-- header --> 
<div class="container"> 
    <div class="row"> 
     <header class="col-xs-12 static_header"> 
      <div class="row"> 
       <div class="col-xs-12 col-sm-3 hidden-xs logo_header"> 
        <img src="images/logo_header.png" /> 

       </div> 

       <div class="col-xs-12 col-sm-9 title_header"> 
        <h1> 
         My Title 
        </h1> 


       </div> 
      </div> 


     </header> 

    </div> 

</div> 

<!-- end header --> 


<!-- content --> 
<div class="container"> 
    <div> 
     <div class="row"> 
      <div class="col-xs-12" id="content_box"> 
       <h2> 
        About 
       </h2> 

       <p> 
        my text 
       </p> 
       ​ 


      </div> 


     </div> 
    </div> 
</div> 


<!-- end content --> 

<footer class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-xs-12 col-sm-4 contact_footer"> 
         <a href="#">info@site.com</a><br> 
         <a href="#">+1 234567890</a> 
        </div> 
        <div id="footer_social_bar" class="col-xs-12 col-sm-4"> 
         <img src="images/fb.png"/> 
         <img src="images/linkedin.png"/> 
         <img src="images/twitter.png"/> 
        </div> 
        <div class="col-xs-12 col-sm-4 copyright"> 
         © 2017, company 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

</footer> 

Answer 1

は、サイトがブラウザと少なくとも同じ大きさであることを確認するために、次のCSSを使用することができます。

html{ 
 
\t height:100%; 
 
} 
 
body{ 
 
\t min-height:100%; 
 
\t background-color:#0C0; 
 
}

<p>I only have a small amount of content. But the body background-color is as big as the screen</p>