CSS autoheight, но подходящий контент для высоты div

Question

У меня есть div, который содержит три child-div. Левый и средний ДИВ есть:

float: left 

а правая имеет:

float: right 

Потому что это разрушит мое расположение на самом деле плохо, я использовал clearfix-хак:

.cf { zoom: 1; } 
.cf:before, 
.cf:after { content: ""; display: table; } 
.cf:after { clear: both; } 

Это работает до сих пор, но я хочу, чтобы правый div был индикатором. Таким образом, высота должна заполнять 100% родительского div.

Как я мог это сделать?

P.S.Here полный код:

<div id="mobile_table_background" ng-show="showTable==true"> 
<div id="mobile_ergHeader"> 
{{responseData.length}} Suchergebnisse 
</div> 
<div class="cf" ng-class="{ 'evenbackground': $even, 'oddbackground': $odd}" ng-repeat="data in responseData | limitTo:limit"> 
    <div class="mobile_imgClass"><img class="table_img" src="img/noten.png" /></div> 
    <div class="mobile_content"> 
     <h5>{{data.titel}}</h5> 
     <table> 
      <tr> 
       <th>Komponist: </th> 
       <td>{{data.komponist}}</td> 
      </tr> 
      <tr> 
       <th>Instrumente: </th> 
       <td>{{data.instrumente}}</td> 
      </tr> 
      <tr> 
       <th>Schlagworte: </th> 
       <td>{{data.schlagworte}}</td> 
      </tr> 
      <tr> 
       <th>Verlagsjahr: </th> 
       <td>{{data.verlagsjahr}}</td> 
      </tr> 
     </table> 
    </div> 
    <div class="status" ng-class="{ 'm_available': data.status=='entlehnbar', 'm_taken': data.status!='entlehnbar'}"></div> 
</div> 
<div class="imgClass"> 
    <img src="img/ajax-loader.gif" ng-if="loading==true"> 
    <span ng-if="noResults==true">Keine Ergebnisse gefunden!</span> 
    <a href="" ng-click="loadMore()" id="loadmoreButton" ng-if="loadMoreButton==true"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>Lade mehr<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a> 
</div> 

Answer 1

что-то вроде этого?

.container { 
 
    background-color:lightgray; 
 
    height:300px; 
 
} 
 
.section { 
 
    display:inline-block; 
 
    border: 1px solid black; 
 
    width: 32%; 
 
} 
 
.right { 
 
    height:100%; 
 
    float:right; 
 
}

<div class="container"> 
 
    <div class="left section">Left</div> 
 
    <div class="middle section">Middle</div> 
 
    <div class="right section">Right</div> 
 
</div>

Answer 2

В сущности, вы можете применить любой метод, предназначенный, чтобы иметь равные колонки по высоте. Несколько методов описаны здесь: установка http://css-tricks.com/fluid-width-equal-height-columns/

Try:

#mobile_table_background {display: table} 
#mobile_ergHeader, .cf, .imgClass { 
    display: table-cell; 
} 

Использование таблицы-клетки будут делать все контейнеры одинаковую высоту (а не только последний), но если это проблема, проверьте другие методы в приведенной выше ссылке.