Question

关于如何在bootstrap容器中创建一个div全高的任何想法？我需要背景一直是白色，如下图所示。

到目前为止，这是我的代码：

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;
}

使用小提琴分叉解决方案，如果这样可以更容易回复：https://jsfiddle.net/tuxedojoe/w47g7pbd/

Answer 1

您真正需要的是设置视口高度，例如min-height: 100vh。有关工作示例，请参阅代码段。希望这会有所帮助。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以尝试：

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

使bootstrap 3容器内容全高

2 个答案: