0

我在一个列表项中有两个（或更多）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>

​</p>

这是小提琴。

我希望.item-descriptiondiv （小提琴中的紫红色边框 div）将留在 listItem （橙色边框元素）内。描述中的 div 是实际的文本容器，不应修改其高度。

这是显示它应该是什么样子的小提琴。

在右边我想达到的结果

结果

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

你能帮助我吗？

4

2 回答 2

0

像下面这样更改ULcss，

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

它会起作用的。

于 2012-12-04T14:53:03.337 回答
0

添加

overflow-y:scroll;

到 .item-description

可能会将所有内容放入 div.AM 不确定这是您所期望的

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

于 2012-12-04T15:04:11.067 回答