使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容器内容全高

回答

相关问题