ブートストラップ3のコンテナの内容をフルハイトにする

ブートストラップのコンテナ内にdivを作成する方法についてのアイデアはありますか？下の画像のように、背景が白くなる必要があります。ブートストラップ3のコンテナの内容をフルハイトにする

はここで、これまでに私のコードです：

index.htmlを

<div class="container white_background_filler"> 
    <row> 
     <div class="col-xs-2"></div> 
     <div class="col-xs-8"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p> 
     </div> 
     <div class="col-xs-2"></div> 
    </row>

のstyle.css

body { 
    margin: 10px; 
    background: #ccccff; 
    height: 100%; 
    min-height: 100%; 
    border: 1px solid #f0f; 
} 

.white_background_filler { 
    background-color: #fff; 
    height: 100%; 
    min-height: 100%; 
    /*border: 1px solid #f00;*/ 
} 

footer { 
    background: #FFF; 
}

使用fiddl応答がより簡単になるように解決策をフォークする：https://jsfiddle.net/tuxedojoe/w47g7pbd/

出典

2017-07-15 Tuxedo Joe

試し '分の高さ：.jumbotron''で100vh'を、それは提案のためにしていることを、あなたの問題 –

本当に必要なのは、ビューポートの高さを設定することです。 min-height: 100vh。実際の例については、コードスニペットを参照してください。お役に立てれば。

body { 
 
    margin: 10px; 
 
    background: #ccccff; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    border: 1px solid #f0f; 
 
} 
 

 
.white_background_filler { 
 
    background-color: #fff; 
 
    min-height: 100vh; 
 
    /*border: 1px solid #f00;*/ 
 
} 
 

 
footer { 
 
    background: #FFF; 
 
}

<div class="container white_background_filler"> 
 
    <row> 
 
     <div class="col-xs-2"></div> 
 
     <div class="col-xs-8"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p> 
 
     </div> 
 
     <div class="col-xs-2"></div> 
 
    </row>

出典

2017-07-15 13:17:51 Cristophs0n

ありがとうを解決することがありテキストをビューポート（100vh）よりも長くするまで、それを行います。あなたのコードで更新されたフィドルを見てください：https://jsfiddle.net/tuxedojoe/w47g7pbd/ –

そして、 'min-height：100vh'を設定してください - 更新されたスニペットを見てください。また、CSSのフレックスボックスを使用することもできました。これは、そのようなコンテナをスタイリングする非常にきれいな方法であり、より高度な制御を提供します。たぶんそれを見てください。 – Cristophs0n

それはそれをしました！ありがとうございました！ –

あなたは試すことができます：

.col-xs-8, row{ 
    height: 100%; 
}

出典

2017-07-15 13:21:22 Kaloyan

いいえ、動作しません。 –

ブートストラップ3のコンテナの内容をフルハイトにする

答えて

関連する問題