javascript - サイズ変更可能なコンテナ div 内で div をスクロール可能にする

Question

MS Windows コマンド プロンプトのような div を作成しようとしています。

div はサイズ変更可能で、タイトルバー div とコンテンツ div の 2 つの子があります。

コンテンツ div がウィンドウ div よりも大きい場合にスクロールバーを取得したい。タイトルバーが常に表示され、スクロールせず、スクロールバーの上に表示されないようにします。

http://www.webdevout.net/test?0vLは、私の問題をインタラクティブに示しています。コンテンツ テキストをクリックすると、新しい行が追加されます。スクロール バーが表示されるのに十分な数の行が追加されても、スクロール バーは表示されません。

コンテンツ div がoverflow:auto設定されました。

100% はタイトル バーの高さを考慮しないため、コンテンツの設定max-heightまたは設定は機能しません。そのため、いくつかの行が下からはみ出した後にスクロール バーが表示されます。また、スクロールバーが表示されると、外側の div のドラッグ可能なつまみが見えなくなり、サイズ変更ができなくなります:(height100%

Answer 1

次の CSS を追加します。

.Content {
    overflow: auto;
    height: inherit;
}

どうぞ: http://www.webdevout.net/test?0v-

乾杯 ;）

Answer 2

サイズ変更可能なウィンドウを子 'content' に変更するだけ<div>です。そうすれば、子のサイズを変更する<div>と、親の<div>サイズが自動的に変更されてその内容が保持されます。

また、それが意図的であったかどうかはわかりませんが<div id ="Content" class="Content">、html と.Frame>.Contents {CSS に含まれています (CSS には content という単語に「s」が含まれていることに注意してください)。

これがあなたが探しているものだと思います：

http://www.webdevout.net/test?0wE

Answer 3

あなたの HTML ツリーは次のようになっていると思います。

• ダイアログ
  • タイトルバー
  • コンテンツ

コンテンツをスクロール可能にするには、overflowCSS プロパティを使用します

.content {
    overflow: auto;
    height: inherit;
}

Answer 4

CSS プロパティを追加する

overflow:auto;