Question

我有一个包含三个child-div的div。左边和中间的div有：

float: left

而正确的人有：

float: right

因为这会破坏我的布局非常糟糕，我使用了clearfix-hack：

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

到目前为止这是有效的，但我希望正确的div成为一个指标。所以它的高度应该填充父div的100％。

我怎么能做到这一点？

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

从本质上讲，您可以应用任何旨在具有相同高度列的方法。这里概述了几种方法：http://css-tricks.com/fluid-width-equal-height-columns/

尝试设置：

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

使用table-cell会使所有容器的高度相同（而不仅仅是最后一个），但如果这是一个问题，请检查上面链接中的其他方法。

Answer 2

这样的事情？

.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>

CSS autoheight，但适合div的高度内容

2 个答案: