1

divに次のように伝えるときの理由を説明してください。

  • 高さは 500px で、最大高さも 500px です。

  • 必要に応じてオーバーフローします (自動)。

要素を div 内に動的に配置すると、必要なサイズに成長し、私の制限を考慮すると、div ではなくページ全体がスクロールします。

なぜ？直し方？

わかりました、最小限の詳細で申し訳ありません。display: inline-tableを使用している場合、私が書いた機能しないものはすべて無視されます...ありがとう

4

2 に答える 2

9

以下は私にとってはうまくいくようです。ここでデモを参照してください: http://jsbin.com/iqigen/5/edit

<style>
  #box {
    height: 500px;
    overflow: auto;
  }
</style>
<div id="box"></div>

ネストされた要素の集合的な高さが親の高さを超えると、親はオーバーフローします。コンテンツがオーバーフローすると、親要素にスクロールバーが表示され、コンテナの境界を越えて子要素が表示されなくなります。

以下を使用して、いくつかの動的要素を追加できます。

var colors = [ '#F00', '#660', '#066' ];

setInterval( addElement, 1000 );

function addElement(){
  $("<p>", { text: new Date() })
    .css( 'background', colors[ Math.floor( Math.random() * colors.length ) ] )
    .appendTo( "#hello" );
}
于 2012-05-01T17:58:05.847 に答える
0

言葉遣いに基づいて何を求めているのか正確にはわかりません。ただし、div が大きくならず、コンテンツが div を超えて背景に移動すると、div がコンテンツよりも小さいままページがスクロールする場合。

これが発生する理由は、max-height: 500px; を設定したためです。あなたのdivで。これを行うことで、「何があっても 500px を超えないように」と言っているのです。min-height を 500px に設定すると、コンテンツに合わせて大きくする必要がない限り、常に 500px になります。

これがあなたの求めているものと正確に一致しない場合は、もう一度お詫び申し上げます。

于 2012-05-01T17:58:28.310 に答える