9

このフィドルを検討してください: http://jsfiddle.net/eKJAj/

その（黄色の）親の合計高さの全体の高さを取るために、絶対配置された div （赤い線）を持たせようとしています。親の目に見える高さだけではありません。

フィドルを試してみると、黄色の div をスクロールしても赤いバーが完全に下がらないことがわかります。また、いくつかの青いセクションが削除された場合、親より大きくすることはできません。

html:

<div class="parent">
    <div class="bar"></div>
    <div class="section"></div>
    <div class="section2"></div>
    <div class="section2"></div>
    <div class="section2"></div>
    <div class="section2"></div>
    <div class="section2"></div>
    <div class="section"></div>
</div>

<input type="button" value="hide" onclick="$('.section2').slideUp(400)" />
<input type="button" value="show" onclick="$('.section2').slideDown(400)" />

CSS:

.parent{
    position:relative;
    width:100%; max-height:300px;
    background-color:yellow;
    overflow-y:auto;
}

.bar{
    position:absolute; left:50px;
    width:1px; height:100%;
    background-color:red;
}

.section, .section2{
    width:100%; height:70px;
    margin-bottom:3px;
    background-color:blue;
}

top:0px; botom:0pxまたはなどの青いバーのいくつかのオプションを試してみましたがposition:relative; margin-left:50px、赤い線を浮かせて試してみましたが、役に立ちませんでした。

可能であれば、CSS のみを保持したいと思います。どんなヒントでも大歓迎です!!

4

1 に答える 1

9

.parent1 つの解決策は、(別の) コンテナーにラップすることです。

JSFiddle。

.parentのコンテナにmax-heightand をoverflow-y代わりに設定します。

<div class="container">
    <!-- parent in here -->
</div>

.container {
    max-height:300px;
    overflow-y:auto;
}
.parent{
    position:relative;
    width:100%;
    background-color:yellow;
}

あなたの例で機能しない理由は、最大の高さを 300px に設定しているためです。100% の高さ.barは、300px の高さを想定しています。この回避策では、.parent仕切りには 300 ピクセルの高さ制限がありませんが、.container代わりに外側に制限があります。

于 2013-03-06T09:23:20.713 に答える