0

AJAX リクエストを介して JSON コンテンツを取得していますが、ネストされた div に追加しようとするとスクロールしません。スクロールバーは表示されますが、非アクティブです。

<style>
.tbox {
    width:440px;
    height: 500px;
    background-color:white;
    border:1px solid #E8E8E8;
    border-color:rgba(0,0,0,0.1);
    border-radius:5px;
    position:relative;
    -moz-box-shadow:3px 3px 14px #000;
    -webkit-box-shadow:3px 3px 14px #000;
    box-shadow:3px 3px 14px #000;
    margin:20px 0 0 50px;
    overflow: hidden;
}
.tbox .tbox-header {
    padding:12px;
    border-bottom:1px solid #E8E8E8;
    border-bottom-color:rgba(0,0,0,0.1);
    width: 100%;
    height: auto;
    overflow: hidden;
}
h1.ttitle {
    font-size:18px;
    line-height:18px;
    font-weight:bold;
}
.tbox .tbox-body {
    width: 100%;
    height: auto;
    overflow-x:hidden;
    overflow-y: scroll;
    position: relative;
}
ol {
    list-style-type:none;
    padding:2px;
}
ol li {
    clear:both;
    border-bottom:1px solid #E8E8E8;
    border-color:rgba(0,0,0,0.1);
    margin-bottom:15px;
    overflow:hidden;
    width:auto;
    height:auto;
}
</style>
<div class="tbox">
    <div class="tbox-header">
        <h1 class="ttitle">My Title</h1>
    </div>
    <div class="tbox-body">
        <ol>
        </ol>
    </div>
</div>

<script>
$.ajax({
    type: "GET",
    url: "[my PHP api]",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $.each(data, function (i, t) {
            $('.tbox-body ol').append(t.content);
        });
    }
});
</script>

ネストされた 2 つのクラス (.tbox-headerおよび.tbox-body) を削除して直接追加すると.tbox正常に動作しますが、ネストされた div にコンテンツを追加しようとすると.tbox-body、スクロールバーが非アクティブになります。オーバーフロー y オプション.tboxを auto または scroll に変更しても問題は解決しません。

4

1 に答える 1

3

あなたが抱えている問題は、tbox-bodyスクロールする必要があるポイントがわからないことです。はtbox500pxの固定高さに設定されています。最も簡単な解決策は、の利用可能な高さを計算し、そのtbox-tbody高さをcssで設定することです。

概念実証として、.tbox-tbodyfromを変更した場合：

height:auto;

に：

height:300px;

スクロールするのがわかるはずです。所定の高さを設定すると、要素にtbox-tbodyさまざまな高さを設定する必要もなくなります。でプロパティoverflow:hiddenを指定するだけで済みます。overflowtbox-tbody

于 2012-12-22T16:33:23.747 に答える