Question

我在这里创造了一个小提琴：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底部的蓝色边框。随着更多内容添加到右下角的框中，它应该继续延伸。如何实现这一目标？

Answer 1

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

此外，如果您希望将其拉伸到200px以上，则应删除max-height:200px;。

Answer 2

您无需更改任何高度。只需将容器的background-color设置为灰色，将右侧单元格的背景颜色设置为白色：

demo

垂直拉伸DIV

2 个答案: