ブートストラップ行の背景色をページの残りの部分に塗りつぶすにはどうすればいいですか？

ブートストラップでウェブページを作るときは、コンテナに入れた行を使用するので、2行でこれを行うと、2ndeをページ全体に埋める方法は？私はそれらの2行があればブートストラップ行の背景色をページの残りの部分に塗りつぶすにはどうすればいいですか？

すなわちは：

here

をどのように私は、ページの残りの部分を埋めるために2nde 1（青1）を作るのですか？

は

HTMLコードがあるありがとう：

<body> 

<div class="container-fluid"> 

    <div class="row row1"> 

     <br> 

    </div> 

    <div class="row row2"> 

     <br> 

    </div> 

</div> 

</body>

とCSSは次のとおりです。

は

.row1{ 
    background-color: orange; 
} 

.row2{ 
    background-color: blue; 
}

PS：私はちょうど行のプロパティを変換したい、1を使用しません本文の背景色でページの残りの部分を色付けしてください。

出典

2017-05-05 Henri

最初のものを '.container'に、2番目を' .container-fluid'に入れますか？あなたもあなたのコードを投稿する必要があります。 –

@MichaelCoker私はあなたの解決策を試してみましたが、うまくいきません。 – Henri

質問/問題点を明確にすることはできますか？それはあまり明確ではありません。 – ZimSystem

フレックスレイアウトを使用して、必要なものを実装できます。

* { 
 
    margin: 0; 
 
} 
 
html, body { 
 
    height: 100%; 
 
} 
 
.row1{ 
 
    background-color: orange; 
 
} 
 

 
.row2{ 
 
    background-color: blue; 
 
} 
 
.container-fluid { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 
.row:last-child { 
 
    flex: 1; 
 
}

<div class="container-fluid"> 
 

 
    <div class="row row1"> 
 

 
     <br> 
 

 
    </div> 
 

 
    <div class="row row2"> 
 

 
     <br> 
 

 
    </div> 
 

 
</div>

jsfiddleも参考のために作られている：ここでは一例です。

キーコードのためのいくつかの説明：

display: flex;：display: flex内のアイテムのためのフレックスレイアウトを使用しています。
flex-direction: column;：.rowを縦に並べます。
flex: 1;：.container-fluid（あなたの場合は.row2）の最後の子を自動的に拡大/縮小します。

出典

2017-05-06 02:34:56 shaochuancs

ブートストラップ行の背景色をページの残りの部分に塗りつぶすにはどうすればいいですか？

答えて

関連する問題