Html 带引导的全高背景色？

因此，我有一个页面，我使用bootstrap进行样式设置。我试图强制

背景色

为全高，但由于我的内容没有填充，因此在底部留下了一个很大的空白

这是我的密码：

<div class="container-fluid" style="background-color: #f5faff; font-family: Segoe UI; padding: 0;">
    <div style="background-color: #0070c0; min-height:100px;">
        <h1 style="color: #ffffff; font-size: 24px; padding-left:20px; padding-top: 30px;">Problem Phase Worksheet:</h1>
    </div>
    <form class="form-horizontal" role="form" style="padding-left: 20px; padding-top: 20px;">
        <div class="col-md-6">
            <div class="form-group">
                <span style="color: #0070c0; font-size: 18px;">Inputs</span>
            </div>          
            <div class="form-group">
                <label class="control-label" for="criteria" style="font-size: 14px;">Criteria:  <a href="#criteriaModal" data-toggle="modal"><span style="color: #afabab;" class="glyphicon glyphicon-question-sign"></span></a></label>
                <input type="text" class="form-control" id="criteria" ng-model="criteria" style="font-size: 14px;" placeholder="(e.g. more than 80%)">
            </div>              
            <div class="form-group">
                <label class="control-label" for="customer" style="font-size: 14px;">Customer:  <a href="#criteriaModal" data-toggle="modal"><span style="color: #afabab;" class="glyphicon glyphicon-question-sign"></span></a></label>
                <input type="text" class="form-control" id="customer" ng-model="customer" style="font-size: 14px;" placeholder="(e.g. enterprise system admins)">
                <!-- <p style="font-size: 12px;">(e.g. Infrastructure admins, network engineer, etc..)</p>   -->      
            </div>
            <div class="form-group">
                <label class="control-label" for="task" style="font-size: 14px;">Job to be Done:  <a href="#criteriaModal" data-toggle="modal"><span style="color: #afabab;" class="glyphicon glyphicon-question-sign"></span></a></label>
                <input type="text" class="form-control" id="task" ng-model="task" style="font-size: 14px;" placeholder="(e.g. keeping servers up to date)">
            </div>
            <div class="form-group">
                <label class="control-label" for="problem" style="font-size: 14px;">Problem:  <a href="#criteriaModal" data-toggle="modal"><span style="color: #afabab;" class="glyphicon glyphicon-question-sign"></span></a></label>          
                <input type="text" class="form-control" id="problem" ng-model="problem" style="font-size: 14px;" placeholder="(e.g. it takes to long (24+ hours) )">
            </div>  
        </div>  
        <!-- criteriaModal -->
        <div class="modal fade" id="criteriaModal" tabindex="-1" role="dialog" aria-labelledby="criteriaModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat odio vel fermentum faucibus. Phasellus vestibulum, justo sed vestibulum bibendum, risus mauris congue nisi, et iaculis ipsum nisl a turpis. Vivamus et purus diam. Proin sagittis nisl eu porttitor posuere. Phasellus feugiat nec elit et hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit a quam eget malesuada. Cras lobortis augue nibh, a feugiat justo consequat ac. In sit amet pulvinar massa. In maximus, justo eget elementum laoreet, lacus nunc molestie lectus, at congue neque nisl quis est. Nam non laoreet mauris. Phasellus non ullamcorper libero. Duis dapibus ornare arcu in fringilla. Curabitur molestie ex eu nunc ultricies, id pharetra nisl semper.</p>
                    </div>
                    <div class="modal-footer">
                        <input type="button" class="naviaBtn naviaBlue" data-dismiss="modal" value="okay">
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->        
        <div class="col-md-6">   
            <div> 
                <span style="color: #0070c0; font-size: 18px;">Examples</span>
                <button type="button" class="btn btn-primary" style="float: right; font-size: 18px;">
                    <span class="glyphicon glyphicon-envelope"></span>  Email
                </button>
            </div>              
            <div style="background-color: #ffffff; padding: 15px; margin-top: 20px; border: 1px solid #ccc;">       
                <div>
                    <p style="font-size: 12px; color: #afabab;">HYPOTHESIS:</p>
                    <p style="font-size: 14px;">We believe that <span>{{ criteria || '[criteria]' }}</span> of <span>{{ (customer != null) ? customer : '[customer]' }}</span> are most frustrated about <span>{{ (task != null) ? task : '[task]' }}</span> because <span>{{ problem || '[problem]' }}</span>.</p>
                </div>
                <div>
                    <p style="font-size: 12px; color: #afabab;">CUSTOMER SCREENING CRITERIA:</p>
                    <p style="font-size: 14px;">We are looking for <span>{{ (customer != null) ? customer : '[customer]' }}</span> who are regularly involved in <span>{{ (task != null) ? task : '[task]' }}</span>.</p>
                </div> 
                <div>
                    <p style="font-size: 12px; color: #afabab;">SCREENER:</p>
                    <p style="font-size: 14px;">How often do you <span>{{ (task != null) ? task : '[task]' }}</span> in your daily job?</p>
                </div>    
                <div>
                    <p style="font-size: 12px; color: #afabab;">CUSTOMER INTERVIEW QUESTIONS:</p>
                    <p style="font-size: 14px;">Tell me about the last time when you were <span>{{ (task != null) ? task : '[task]' }}</span>?</p>
                    <p style="font-size: 14px;">What are the major challenges with <span>{{ (task != null) ? task : '[task]' }}</span>?</p>
                    <p style="font-size: 14px;">On a scale of 0-10, how frustrating are these problems? Why?</p>            
                    <p style="font-size: 14px;">If you could wave a magic wand and be able to do anything about <span>{{ (task != null) ? task : '[task]' }}</span> in your daily job, what would it be?</p>
                </div>  
            </div>          
        </div>                         
    </form>
</div>

问题阶段工作表：
投入
标准：
客户：
要做的工作：
问题:
&时代；
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一种发酵剂。前庭相位、正前庭、斜视前庭、斜视前庭、斜视前庭和斜视前庭。维瓦姆斯和普卢斯直径。在波苏尔的港口。Phasellus feugiat nec elit和hendrerit。Lorem ipsum dolor sit amet，是一位杰出的献身者。佩伦斯克布朗迪特是一个男人。克拉斯·洛博蒂斯·奥古斯·尼布（Cras lobortis augue nibh），一位坐在阿梅特·普尔文纳·马萨（amet pulvinar massa）的封建主义法官。在马克西姆斯，在康涅克尼斯奎斯特的《莱奥里特元素》一书中，莱克斯·努克·莫莱斯蒂·莱克图斯的作品。Nam non laoreet mauris。Phasellus非乌拉姆科珀自由人。弗林利亚的杜伊斯·达皮布斯·奥纳雷·阿库。欧洲其他国家的动物，我是pharetra nisl semper

例子
电子邮件
假设：

我们认为{{（客户！=null）{（客户）{customer]}}中的{criteria}对{（任务！=null）}任务：{task]}最沮丧，因为{（问题）{problem}{
客户筛选标准：

我们正在寻找{{（客户！=null）？客户：'[customer]'}}，他们经常参与{（任务！=null）？任务：'[task]}
筛选程序：

您在日常工作中{（task！=null）{task:'[task]}}的频率是多少

客户访谈问题：

告诉我您上次在{{（task！=null）}任务：'[task]}时的情况

{{（task！=null）？task:'[task]}的主要挑战是什么

在0-10的范围内，这些问题有多令人沮丧？为什么？
如果你能挥动魔杖，对日常工作中的{{（task！=null）}任务：'[task]}做点什么，那会是什么

看起来：

---

我在这件事上做错了什么？我曾尝试在parent div和all上使用

row fluid

类，但没有成功。想法？

容器流体不会将div设置为全高

尝试将背景色直接设置为

<body>

相反，如果您的设计允许在页面的

标记中使用它，请为body标记编写内部样式

body{背景色：绿色；}

现在您的页面将具有全高背景色

编辑： 下面是内联样式的代码

<head>
//Link to the bootstrap.css file here.
//internal style for the page.
<style>
    body { background-color:green;}
</style>
</head>
<body>

</body>

//链接到bootstrap.css文件。
//页面的内部样式。
正文{背景色：绿色；}

您可以在整个页面中分配背景：

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
身体{
背景色：#f5faff；
字体系列：SegoeUI；
字体大小：14px；
}

问题阶段工作表：
投入
标准：
客户：
要做的工作：
问题:
&时代；
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一种发酵剂。前庭相位、正前庭、斜视前庭、斜视前庭、斜视前庭和斜视前庭。维瓦姆斯和普卢斯直径。在波苏尔的港口。Phasellus feugiat nec elit和hendrerit。Lorem ipsum dolor sit amet，是一位杰出的献身者。佩伦斯克布朗迪特是一个男人。克拉斯·洛博蒂斯·奥古斯·尼布（Cras lobortis augue nibh），一位坐在阿梅特·普尔文纳·马萨（amet pulvinar massa）的封建主义法官。在马克西姆斯，在康涅克尼斯奎斯特的《莱奥里特元素》一书中，莱克斯·努克·莫莱斯蒂·莱克图斯的作品。南农