Question

我在列表项中有两个（或更多）DIV，但我无法使最后一个DIV适合其容器的剩余高度。

这是代码：

CSS

div{margin: 5px;}
ul{
    height: 300px;/*it's calculated via js*/
    width: 250px;/*it's calculated via js*/
    padding: 0;/*don't change it*/
    margin: 0;/*don't change it*/


    background-color: #F5EBD6;
    border: 4px solid orange;
}
li{
    list-style-type: none;

    background-color: #E0E5F5;
    border: 2px solid blue;
}
.item-title{
    background-color: #EDF5E0;
    border: 2px solid green;
}
.item-description{
    background-color: #FDF1FB;
    border: 2px solid fuchsia;
}
.item-description>div{
    background-color:rgba(252,255,170,0.3);
}

HTML

<ul>
<li>
    <div class="item-title">Title</div>
    <div class="item-description">
        <div style="margin: 0px; padding: 0px; border: 0px;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
            reprehenderit in voluptate velit esse cillum dolore eu fugiat 
            nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
            sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
            reprehenderit in voluptate velit esse cillum dolore eu fugiat 
            nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
            sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</li>

这是Fiddle。

我希望.item-description div（小提琴中的紫红色边界div）将保留在listItem（橙色边框元素）中。描述中的div，即实际的文本容器，不应该在其高度上进行修改。

这是显示它应该是什么样的Fiddle。

在右侧，我想要达到的结果

result

如果可能，我想使用css / css3解决问题，而不是使用js而不更改HTML。

你能帮助我吗？

Answer 1

更改UL css，如下所示

ul {
    background-color: #F5EBD6;
    border: 4px solid orange;
    float: left;
    margin: 0;
    min-height: 300px;
    padding: 0;
    width: 250px;
}

它会起作用。

Answer 2

添加

overflow-y:scroll;

到.item-description

可能会把所有内容都放在div.AM中，不确定这是你所期待的

http://jsfiddle.net/Pdaj8/2/

最后的DIV适合容器高度

在右侧，我想要达到的结果

2 个答案: