Volle Hintergrundfarbe mit Bootstrap?

Question

So habe ich eine Seite und ich benutze Bootstrap für Styling.Ich versuche, die background-color zu zwingen, volle Höhe zu sein, aber weil mein Inhalt nicht füllt, hinterlässt es einen großen Leerraum am unteren Rand.

Hier ist mein Code:

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

Und wie folgt aussieht:

Was bin ich auf das falsch? Ich habe versucht, die row-fluid Klasse auf Eltern Div und alle, aber kein Glück. Gedanken?

Answer 1

Behälter-Flüssigkeit stellt nicht die div voller Höhe

Versuchen Sie, die Hintergrundfarbe direkt auf

<body> 

stattdessen sein, wenn Ihr Design erlaubt es

Answer 2

Im <head> Tag Schreiben Sie auf Ihrer Seite den internen Stil für das Body-Tag.

body{ background-color: green; }

Jetzt werden Sie Seite voller Höhe Hintergrundfarbe haben.

Bearbeiten: Hier ist der Code für Inline-Stil.

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

</body> 

Answer 3

Sie können einen Hintergrund in der gesamten Seite vollständig zuzuordnen:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
body { 
 
    background-color: #f5faff; 
 
    font-family: Segoe UI; 
 
    font-size: 14px; 
 
}

<div class="container-fluid"> 
 
    <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">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" placeholder="(e.g. more than 80%)"> 
 
      </div>    
 
      <div class="form-group"> 
 
       <label class="control-label" for="customer">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" 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">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" placeholder="(e.g. keeping servers up to date)"> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="control-label" for="problem">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" 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>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>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>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>Tell me about the last time when you were <span>{{ (task != null) ? task : '[task]' }}</span>?</p> 
 
        <p>What are the major challenges with <span>{{ (task != null) ? task : '[task]' }}</span>?</p> 
 
        <p>On a scale of 0-10, how frustrating are these problems? Why?</p>    
 
        <p>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>