即使将高度设置为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％

回答

相关问题