即使將高度設置爲100％，子div的高度也比父母的矮，即使將高度設置爲100％

我正在使用引導程序，我不知道爲什麼兒童div的高度在大屏幕上較短，而在小屏幕上爲100％。這裏是大屏幕上看起來像一個設備. I want that white space at the bottom gone.我試着將高度設置爲100％，但它不工作。這是它在小屏幕上的樣子。 You can notice that as the screen get smaller, the button is hiding behind the section below it.即使將高度設置爲100％，子div的高度也比父母的矮，即使將高度設置爲100％

這裏的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>

而這裏的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; 
}

感謝您的幫助

來源

2017-06-03 Nelson

你有一個林到您的網站？ imo問題是＃project-image div比另一個更高。嘗試使用您的開發工具瀏覽器查看 –

根據我的問題是，父DIV有一些空白和邊距。這不允許div達到100％的高度。或者，也許可能有任何問題相關的引導

來源

2017-06-04 00:01:13

即使將高度設置爲100％，子div的高度也比父母的矮，即使將高度設置爲100％

回答

相關問題