0

ここでフィドルを作成しました：http://jsfiddle.net/mupersan82/xAgHg/2/

HTML:

                <div class="incidentRow">
                <div class="incidentCellLeft">
                    <span class="incidentCellTopLeft incidentId">206 805</span>
                    <span class="incidentCellBottomLeft incidentReferences">15</span>
                </div>
                <div class="incidentCellTopRight incidentSubject">Anders Buch Lassen</div>
                <div class="incidentCellBottomRight incidentDescription ">
                    <span class="multilineEllipseText">Knokler, knokler, knokler! 
                        Burde gå i seng. Burde gå i seng. Burde gå i seng.
                    Burde gå i seng.Burde gå i seng.Burde gå i seng.
                    Burde gå i seng.Burde gå i seng.Burde gå i seng.</span></div>
            </div>

左側の灰色のボックスを、ラッパー div の下部にある青い境界線まで引き延ばします。右下のボックスにコンテンツが追加されると、引き続き伸びていくはずです。これはどのように達成できますか？

4

2 に答える 2

2 
.incidentCellLeft
{
    max-height:200px;
    width: 50px;
    display: block;
    float:left;
    text-align: center;
    background-color: #E6E6E6;
    vertical-align: bottom;
    height:100%;
    position: absolute;
}

height:100%;とposition: absolute;追加しました。デモはこちら: http://jsfiddle.net/xAgHg/5/

max-height:200px;また、高さ 200px 以上に引き伸ばしたい場合は削除する必要があります。

于 2012-11-15T14:04:40.377 に答える
0

高さを変える必要はありません。background-colorコンテナの を灰色に設定し、右のセルの背景色を白に設定するだけです:

デモ

于 2012-11-15T14:09:00.207 に答える