Die Höhe der Child div ist kürzer als die der Eltern, auch wenn die Höhe auf 100% gesetzt ist

Question

Ich benutze Bootstrap und ich weiß nicht, warum ein Kind Div Höhe auf einem großen Bildschirm und 100% auf einem kleinen Bildschirm ist kürzer. Hier ist ein Bild von dem, was es auf dem großen Bildschirm aussieht . I want that white space at the bottom gone. Ich habe versucht, die Höhe auf 100%, aber es funktioniert nicht. So sieht es auf einem kleinen Bildschirm aus. You can notice that as the screen get smaller, the button is hiding behind the section below it.

Hier ist der HTML-

<div class="project"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" id="project-description"> 
       <h3>Project</h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Nulla pretium varius velit, quis bibendum augue pharetra nec. Integer venenatis ipsum ex, quis euismod dui interdum non. Quisque lobortis magna in risus rutrum, vel dictum nulla pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pretium varius velit, quis bibendum augue pharetra nec. Integer venenatis ipsum ex, quis euismod dui interdum non. Quisque lobortis magna in risus rutrum, vel dictum nulla pulvinar. <br><br><a href="#" class="btn btn-default">More Info</a></p> 
      </div> 

      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" id="project-picture"> 
      </div> 
     </div> 
    </div> 
</div> 

Und hier ist die CSS

.project { 
    height: 400px; 
} 

    .project .container-fluid { 
    max-height: 100%; 
} 

    .project #project-description { 
    background-color: #013051; 
    max-height: 400px; 
    color: #fff; 
    font-family: Futura, "Trebuchet MS", Arial, sans-serif; 
    font-size: 15px; 
} 

    .project #project-description h3 { 
    margin-top: 60px; 
} 

    #project-description h3, #project-description p { 
    margin-left:40px; 
} 

    #project-description p { 
    border-left: 1px solid #f5f5f5; 
    padding-left: 20px; 
} 

    #project-description p a { 
    background-color: #013051; 
    border: 1px solid #f5f5f5; 
    color: #f5f5f5; 
    padding: 10px 30px; 
} 

    #project-description p a:hover, .contact form button:hover { 
    background-color: #f5f5f5; 
    color: #000; 
} 

    .project #project-picture { 
    background-image: url(file:///C:/Users/Nelson/Desktop/EsperAfrica/Images/jd-mason-43265.jpg); 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
    height: 400px; 
} 

Danke für Ihre Hilfe

Answer 1

mir Nach das Problem ist, dass die Eltern div einige Polsterung und Marge haben. Das erlaubt dem Div nicht, seine 100% Höhe zu bekommen. Oder vielleicht könnte es irgendein Problem im Zusammenhang Bootst