响应div适合父容器的高度

Question

我试图启用3个框来填充其响应容器的高度，我看了网上的许多教程，但似乎没有任何帮助。

该测试站点位于此处，供您查看： http : //pagedev.co.uk/bowmite/

我只希望最新项目的3个顶部白盒适合其容器的高度。 我认为他们所有的身高看起来都很不整齐。

如果您需要其他任何信息，请告诉我。

以下是我的html：

<!-- 3 latest Projects -->
<div class="home-projects">
    <!-- One Project -->
    <div class="home-project-item">
        <img class="home-project-image" src="images/postimage.jpg">
        <div class="home-project-copy">
            <p>Our experienced team of fully certified engineers regularly work on projects in excess of £4m in value, often working alongside main contractors on entire new build estates or prestige new buildings as you can see in our projects pages.</p>
        </div>
    </div>

    <!-- One Project -->
    <div class="home-project-item">
        <img class="home-project-image" src="images/postimage.jpg">
        <div class="home-project-copy">
            <p>Based in Essex, our focus is across London and within the M25, working for some of the leading construction companies in the country. Our growing reputation is such that many of our contracts are repeat business from our long established clients.</p>
        </div>
    </div>

    <!-- One Project -->
    <div class="home-project-item">
    <img class="home-project-image" src="images/postimage.jpg">
        <div class="home-project-copy">
            <p>BEMs highly experienced workforce are fully qualified and certified. All of our operatives hold up to date CSCS cards and company accreditations include NICEIC, Gas Safe, Construction Line, SSIP and CHAS.</p>
        </div>
    </div>
</div>

这是我的CSS：

.home-projects  {
    width:100%;
    height:auto;
    float:left;
    margin-bottom:20px;
}

.home-project-item  {
    background-color:#ffffff;
    width:31.333%;
    margin-right:3%;
    float:left;
    position:relative;

    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -khtml-border-radius: 4px;
}

.home-project-item:nth-child(3) {
    margin-right:0%;
}

.home-project-image {
    width:100%;

    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0;

    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0;
}

.home-project-copy  {
    padding-right:20px;
    padding-left:20px;
    padding-top:25px;
    padding-bottom:15px;
}

Answer 1

您应该尝试添加：

height: 10em;

到.home-project-copy，这使它们的高度相同。

Answer 2

如果不想使用旧的浏览器，请使用flexbox。

在您的情况下，仅向.home-projects添加display: flex将使其按预期工作：

.home-projects {
   width: 100%;
   height: auto;
   float: left;
   margin-bottom: 20px;
   display: flex;
}

有关Flexbox的更多信息，请参见http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

我只是将min-height：360px添加到框中，然后在媒体查询中执行了min-height：inherit;。