フッターの背景が役に立たない

Question

私は学校のための簡単なウェブサイトを作ろうとしていましたが、私のフッターの背景が大きすぎます。

誰もがそれを修正する方法上の任意のアイデアを持っている場合はここに私のHTML

<div class="container-fluid"> 

    <nav> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">Portofolio</a></li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
    </nav> 

    <article> 
    <div class="col-md-4"> 
     <img src="images/nature.jpg"> 
     <h1>Lorem ipsum dolor sit amet</h1> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
     </p> 
    </div> 
    </article> 
    <article> 

    <div class="col-md-4"> 
     <img src="images/nature.jpg"> 
     <h1>Lorem ipsum dolor sit amet</h1> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
     </p> 
    </div> 
    </article> 
    <article> 

    <div class="col-md-4"> 
     <img src="images/nature.jpg"> 
     <h1>Lorem ipsum dolor sit amet</h1> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
     </p> 
    </div> 
    </article> 

    <article> 
    <div class="col-md-4"> 
     <img src="images/nature.jpg"> 
     <h1>Lorem ipsum dolor sit amet</h1> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
     </p> 
    </div> 
    </article> 

    <article> 
    <div class="col-md-4"> 
     <img src="images/nature.jpg"> 
     <h1>Lorem ipsum dolor sit amet</h1> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
     </p> 
    </div> 
    </article> 

    <article> 
    <div class="col-md-4"> 
     <img src="images/nature.jpg"> 
     <h1>Lorem ipsum dolor sit amet</h1> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
     </p> 
    </div> 
    </article> 

    <article> 
    <div class="col-md-4"> 
     <img src="images/nature.jpg"> 
     <h1>Lorem ipsum dolor sit amet</h1> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
     </p> 
    </div> 
    </article> 

    <article> 
    <div class="col-md-4"> 
     <img src="images/nature.jpg"> 
     <h1>Lorem ipsum dolor sit amet</h1> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
     </p> 
    </div> 
    </article> 

    <article> 
    <div class="col-md-4"> 
     <img src="images/nature.jpg"> 
     <h1>Lorem ipsum dolor sit amet</h1> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
     </p> 
    </div> 
    </article> 

    <article> 
    <div class="col-md-4"> 
     <img src="images/nature.jpg"> 
     <h1>Lorem ipsum dolor sit amet</h1> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
     </p> 
    </div> 
    </article> 

    <article> 
    <div class="col-md-4"> 
     <img src="images/nature.jpg"> 
     <h1>Lorem ipsum dolor sit amet</h1> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
     </p> 
    </div> 
    </article> 

    <article> 
    <div class="col-md-4"> 
     <img src="images/nature.jpg"> 
     <h1>Lorem ipsum dolor sit amet</h1> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
     </p> 
    </div> 
    </article> 

    <div class="footer"> 
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. </p> 
    </div> 

</div> 

ここでは私のCSSでのIはsometihngsを変更しようとしましたが、私の背景は、トップ

で示す保持 教えてください

background-color:#d2d8e0; 
} 

nav { 
    background-color: #64f48a; 
    float: center; 
    padding: 20px 0px 0px 350px; 
} 

nav ul li { 
    padding: 0px 50px 20px 0px; 
    display: inline-block; 
} 

nav ul li a { 
    color: #f0f0f0; 
} 

nav ul li:hover { 
    background-color: black; 
} 

article { 
    padding: 0px 0px 0px 50px; 
} 

article img { 
    padding: 0px 0px 0px 50px; 
} 

article h1 { 
    text-align: center; 
    font-size: 20px; 
    padding: 0px 0px 0px 0px; 
} 

article p { 
    text-align: center; 
    font-size: 15px; 
} 

.footer { 
    background-color: red; 
} 

.footer p { 
    text-align: center; 
    color: #fff; 
} 

Answer 1

からpadding-bottom: 200px;を削除ブートストラップに適用されますカラムはrow（Grid System参照）で囲む必要があります。

フッターに表示プロパティを追加するか、フッターを囲む列を追加することもできます（<div class="col-md-12">）。

.footer { 
    background-color: red; 
    display: inline-block; 
    width: 100%; 
} 

.row div要素を追加して実施例。

nav { 
 
    background-color: #64f48a; 
 
    float: center; 
 
    padding: 20px 0px 0px 350px; 
 
} 
 
nav ul li { 
 
    padding: 0px 50px 20px 0px; 
 
    display: inline-block; 
 
} 
 
nav ul li a { 
 
    color: #f0f0f0; 
 
} 
 
nav ul li:hover { 
 
    background-color: black; 
 
} 
 
article { 
 
    padding: 0px 0px 0px 50px; 
 
} 
 
article img { 
 
    padding: 0px 0px 0px 50px; 
 
} 
 
article h1 { 
 
    text-align: center; 
 
    font-size: 20px; 
 
    padding: 0px 0px 0px 0px; 
 
} 
 
article p { 
 
    text-align: center; 
 
    font-size: 15px; 
 
} 
 
.footer { 
 
    background-color: red; 
 
} 
 
.footer p { 
 
    text-align: center; 
 
    color: #fff; 
 
    padding: 50px 10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 

 
    <nav> 
 
     <ul> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">Services</a> 
 
     </li> 
 
     <li><a href="#">Portofolio</a> 
 
     </li> 
 
     <li><a href="#">Blog</a> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 

 
    <article> 
 
     <div class="col-md-4"> 
 
     <img src="http://placehold.it/150x150/000/fff"> 
 
     <h1>Lorem ipsum dolor sit amet</h1> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
 
     </p> 
 
     </div> 
 
    </article> 
 

 
    <article> 
 
     <div class="col-md-4"> 
 
     <img src="http://placehold.it/150x150/000/fff"> 
 
     <h1>Lorem ipsum dolor sit amet</h1> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
 
     </p> 
 
     </div> 
 
    </article> 
 
    <article> 
 

 
     <div class="col-md-4"> 
 
     <img src="http://placehold.it/150x150/000/fff"> 
 
     <h1>Lorem ipsum dolor sit amet</h1> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
 
     </p> 
 
     </div> 
 
    </article> 
 

 
    <article> 
 

 
     <div class="col-md-4"> 
 
     <img src="http://placehold.it/150x150/000/fff"> 
 
     <h1>Lorem ipsum dolor sit amet</h1> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
 
     </p> 
 
     </div> 
 
    </article> 
 
    <article> 
 

 
     <div class="col-md-4"> 
 
     <img src="http://placehold.it/150x150/000/fff"> 
 
     <h1>Lorem ipsum dolor sit amet</h1> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
 
     </p> 
 
     </div> 
 
    </article> 
 
    <article> 
 

 
     <div class="col-md-4"> 
 
     <img src="http://placehold.it/150x150/000/fff"> 
 
     <h1>Lorem ipsum dolor sit amet</h1> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
 
     </p> 
 
     </div> 
 
    </article> 
 
    <article> 
 

 
     <div class="col-md-4"> 
 
     <img src="http://placehold.it/150x150/000/fff"> 
 
     <h1>Lorem ipsum dolor sit amet</h1> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
 
     </p> 
 
     </div> 
 
    </article> 
 
    <article> 
 

 
     <div class="col-md-4"> 
 
     <img src="http://placehold.it/150x150/000/fff"> 
 
     <h1>Lorem ipsum dolor sit amet</h1> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
 
     </p> 
 
     </div> 
 
    </article> 
 
    <article> 
 

 
     <div class="col-md-4"> 
 
     <img src="http://placehold.it/150x150/000/fff"> 
 
     <h1>Lorem ipsum dolor sit amet</h1> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
 
     </p> 
 
     </div> 
 
    </article> 
 

 
    <article> 
 
     <div class="col-md-4"> 
 
     <img src="http://placehold.it/150x150/000/fff"> 
 
     <h1>Lorem ipsum dolor sit amet</h1> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
 
     </p> 
 
     </div> 
 
    </article> 
 
    <article> 
 

 
     <div class="col-md-4"> 
 
     <img src="http://placehold.it/150x150/000/fff"> 
 
     <h1>Lorem ipsum dolor sit amet</h1> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
 
     </p> 
 
     </div> 
 
    </article> 
 
    <article> 
 

 
     <div class="col-md-4"> 
 
     <img src="http://placehold.it/150x150/000/fff"> 
 
     <h1>Lorem ipsum dolor sit amet</h1> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. 
 
     </p> 
 
     </div> 
 
    </article> 
 

 
    </div> 
 

 
    <div class="footer"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.</p> 
 
    </div> 
 

 
</div>

Answer 2

ボトムにフッターフッタを配置する場合は、フッタを押し下げるようにボディにボトムパディングを追加する必要があります。また、フッターに実際に高さを設定する必要があります。

あなたがこれを行う方法についての詳細を知りたい場合は、この記事をチェックアウト：

https://css-tricks.com/snippets/css/sticky-footer/

Answer 3

これは、フロートの問題です.footer p