12

高さ 100% の固定 div があり、その中に相対的に配置された子 div があります。child-div は変更可能なテキストを保持するため、固定の高さはありません。

コンテンツが画面からはみ出す場合、child-div を垂直方向にスクロールしたい。これを実現するために最小および最大の高さのプロパティをいじってみましたが、これは理想的な解決策ではなく、常に機能するとは限りません。

編集：最小および最大の高さはほとんど無視されているようです。最小の「許容」画面高さに対して textBox が占める垂直領域の量を計算し、それを高さとして設定しました。最小高と最大高を追加しても、これに違いはありませんでした。このソリューションの唯一の問題は、ボックスが常に約 60% であるため、スクロールする必要がない場合でもスクロールすることです。これは機能しますが、理想的ではありません。これを回避する方法があれば、それは素晴らしいことです。

これは私がこれまでに持っているものです:

<div class="content">
    <div id="textbox"> some text
    </div>
</div>

.content { position: fixed; height: 100%; top: 0px; right: 0px; }

#textBox { 
    position: relative;
    top: 165px;
    height: 61.5%;
    overflow-y: auto;
}

これを行うためのより良い、より確実な方法はありますか?

4

3 に答える 3

13

以下は私にとって完璧に機能しました：

<style type="text/css">
    #fixed {
        position:   fixed;
        top:        0;
        bottom:     0;
        left:       0;
        right:      0;
        border:     1px solid black;
        overflow:   hidden;
        background: white;
    }

    #scrolling {
        overflow: auto;
        max-height: 98%;
    }
</style>

<div id="fixed">
    <div contenteditable id="scrolling">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
        egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
        ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
        fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non
        enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas
        augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
        facilisis luctus, metus</p>
    </div>
</div>

div のコンテンツは編集可能なので、スクロールするまでテキストを追加するだけです。まともなブラウザで動作します。

実際の例

于 2012-04-14T20:35:42.067 に答える
2

基本的に、この例でわかるように、固定要素のオーバーフローを設定する必要があり、可能性を試すためのjsfiddleがあります。

于 2012-04-14T20:09:14.213 に答える