1

さまざまな質問を 1 つの回答にまとめようとしていますが、私が望んでいることを正確に行うものはないようです。

固定高さの div "スペーサー" を持つ div "コンテナ" を指定すると、別の div "データ" はその親の残りの高さの最大値を占有し、その親の V スクロールもブラウザも壊さず、代わりに独自のVスクロールのみ。シンプルに聞こえます。

<div id="container">
    <div id="spacer">spacer</div>
    <div id="data">
        text<br/>
        text<br/>
        text<br/>
        ...
    </div>
</div>

CSS:

html, body, #container { height:100% }
#spacer { height: 50px; }
#data
{ 
  overflow-y: scroll;
  height: 100%;
}

JSFiddle の例 (失敗)

ページの V スクロールを壊し続けます (おそらく、親がページと同じ高さになるのに、固定の高さだけ下にシフトされるためです。

4

2 に答える 2

3

使用してもかまわない場合は、絶対/相対ポジショニングを利用するソリューションを次に示します。

HTML 構造は同じままです (JSFiddle に基づきます)。ただし、CSS 定義を変更/追加したため、最終的には次のようになりました (margin:0これは、ボディが不要なスペースでレンダリングされないようにするためです):

html, body{
    margin:0;
    height:100%;
}
#container {
    height:100%
    position: relative;
}
#spacer {
    height: 50px;
}
#data {
    overflow-y: scroll;
    position:absolute;
    top:50px;
    bottom:0;
    left:0;
    width:100%;
}

これにより、垂直方向に拡張して、まだ取り込まれていない#dataすべてのスペースを埋めることができます。ただし、 の下部までしか移動しません。この場合はビューポートの下部です ( による)。追加のコンテンツは要素内でスクロールします。これは、ここで知っているように見える要素の正確な高さまたは相対的な高さを知っている場合にのみ機能することに注意してください。#spacer#container#containerheight:100%#data#spacer

これが何を達成するかを示す更新された JSFiddleを次に示します。これがあなたが探していたものでない場合はお知らせください。さらにサポートさせていただきます。幸運を！

于 2013-08-09T04:34:14.857 に答える