2

奇妙な問題を抱えている（理解していないので奇妙な）

高さ 100% の jQuery UI タブとコンテンツの垂直オーバーフロー スクロールバーを使用しようとしています。

これは機能しません。スクロール可能な領域が表示領域よりも大きいため、スクロールバーの下部が表示領域の下になります。リスト領域の高さでスクロール領域が拡張されているように見えます。

この問題は、100% の高さでのみ有効です (これをさまざまな方法でテストしてください)。固定の高さを（何らかの方法で）設定するとすぐに、問題はなくなりましたか???

いくつかのテストの結果、UI のせいではなく、問題はネイティブ リスト アイテムでも有効であることがわかりました。

私のセットアップはこれです：

  • 利用可能なすべてのスペースを使用する必要があります (完全な iframe、div、ウィンドウ)
  • トップリストの高さがわからない。
  • 残りのスペースを垂直オーバーフローのあるコンテンツに使用する必要がある
  • 高さを変更するためにスクリプトを使用しません (CSS と HTML5 のみで可能でなければなりません)

ここでデモンストレーションを見ることができます：

http://jsfiddle.net/beasty/6cAat/10/

それを修正する方法について何か提案はありますか？

ありがとうベニー

4

2 に答える 2

1

css プロパティの height: 100% は、相対的に配置された要素には影響しません。

<div style="position: relative; height: 100%; border-style: solid; border-width:2px;">

    <div id="contenttab" style="position: absolute; top: 0; bottom: 0; right: 0; left: 0; overflow-y: auto;">

        Looong text

    </div>
</div>

これを行うための少し良い方法を次に示します。絶対に配置された div の上のリストの高さを決定する必要があります。

于 2012-08-09T20:13:18.753 に答える
0

これは、最上位div要素のオーバーフローが非表示になっているためです。その子div要素は、高さが 100% であるため、親の高さを超えています。ブラウザは親の高さを計算します。この場合は 643 ピクセルです。したがって、子も 643 ピクセルですが、高さが 60 ピクセルの順序付けられていないリストと可視スペースを共有する必要があります。したがって、子div要素の 60 ピクセルが非表示になります。

解決策として、の高さulを 10% に、子の高さdivを 90% に設定できます。しかし、注意してください！高さの宣言に含まれていない境界線を使用しているため、使用している境界線のピクセル数とまったく同じ量の子 div が失われます。また、ulこれまでに成長した場合、その内容もビューから切り取られる可能性があります。div子またはの高さを指定せずul、代わりに親divがオーバーフローできるようにすることをお勧めします。それ以外の場合は、「フレーム-y」のようです。

于 2012-08-09T20:09:22.813 に答える