使bootstrap 3容器內容全高

有關如何在引導容器全高內製作div的任何想法？我需要將背景變成白色，如下圖所示。使bootstrap 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

試'最小高度：100vh'在'.jumbotron'，可能會解決您的問題 –

真的，您只需設置視口高度，例如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

thanx的建議和這樣做，直到我得到的文本比視口（100vh）更長。使用您的代碼查看更新的小提琴：https：//jsfiddle.net/tuxedojoe/w47g7pbd/ –

然後，只需設置'min-height：100vh' - 查看更新後的代碼片段。你也可以使用CSS flexbox，這是一個很好的造型這種容器的方式，並提供更高級的控制。也許看看它。 – Cristophs0n

這樣做！謝謝！ –

你可以試試：

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

來源

2017-07-15 13:21:22 Kaloyan

不，不工作。 –

使bootstrap 3容器內容全高

回答

相關問題