Адаптивная настройка 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-проект-копия это дает им все тот же рост.

Answer 2

Если поддержка старых браузеров не намерена, обратитесь к flexbox.

В вашем случае только добавление display: flex к .home-projects заставит его работать, как вы ожидаете:

.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

Я просто добавил мин-высота: 360 пикселей в поле, а затем на медиа-запросах сделана min-height: inherit;