0

リスト アイテム内に 2 つ (またはそれ以上) の 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>

</p>

これがフィドルです。

.item-descriptiondiv (Fiddle のフクシアの縁取りされた div) が listItem (オレンジ色の縁取りされた要素) 内に留まることを望みます。説明内の div (実際のテキスト コンテナー) の高さは変更しないでください。

これがどのように見えるかを示すフィドルです。

右側に到達したい結果

結果

可能であれば、js ではなく、HTML を変更せずに css/css3 を使用して問題を解決したいと考えています。

手伝って頂けますか？

4

2 に答える 2

0

追加する

overflow-y:scroll;

.item-descriptionへ

すべてのコンテンツを div.AM 内に配置する可能性がありますが、これがあなたが期待しているものかどうかはわかりません

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

于 2012-12-04T15:04:11.067 に答える
0

UL以下のようにcssを変更します。

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 に答える