4

私の英語が下手でごめんなさい、あなたが私の問題を理解してくれることを願っています。

私は以前に一度解決したことがわかっている問題に頭を向けています。問題は、DIV内に2つのDIVが必要であり、一方のDIVが特定の高さで、もう一方が親のdivの高さの残りを埋めていることです。問題は、2番目のdiv（高さが定義されていないか100％の高さ）が垂直スクローラーでオーバーフロー可能である必要があることです。これはすべて、左側のリストと右側のアクションウィンドウを操作する「Outlook」のようなウィンドウセットアップを作成することです。左側のリストには、検索だけでなくリストを制限できるヘッダーが必要です。

問題の例を見つけるには、http：//kokongcrm0.server111.wdc.webdeal.no/index-test.phpを参照してください。

すべての助けは良い助けです（！）事前に感謝します。誰かが助けてくれたらとても嬉しいです！

4

3 に答える 3

5

position: relativeと組み合わせてposition: absolute使用​​します。

ライブデモ

これらの最後の2行を削除します。

div#iHeader { height:50px; background:#009900; }
div#iWrapper  { height:100%; padding-top:-50px; padding-bottom:-150px; overflow:auto; }

それらを次のように置き換えます。

div#list {
    position: relative
}
div#iHeader {
    height:50px; background:#009900;

    width: 100%;
    position: absolute;
    top: 0;
    left: 0
}
div#iWrapper { 
    overflow:auto;

    width: 100%;
    position: absolute;
    top: 50px;
    left: 0;
    bottom: 0
}
于 2011-03-24T16:59:21.430 に答える
1

これを行うには少し異なる方法があるので、上と下の座標を一緒に使用する必要はありません-そうすれば、IE7でも機能させることができます

（これには、IE6 / 7をQuirksモードにする必要がありますが、それが使用される場合は、Doctypeの前のコメントを参照してください）

JSBIN-IE7互換バージョン

これは、相対と絶対の混合を使用するという点で30ドットと非常に似ていますが、この方法ではボーダーボックスボックスサイズモデルを使用するため、パディングによってスペースを作成し、高さの使用を維持できます。

于 2011-03-24T17:26:36.473 に答える
0

その1kの高さdivを削除し、このiWrapperverフローを自動にします。したがって、これを変更します。

<div id="iWrapper">
  <div style="height:1000px;">
    test test
  </div>
</div>

これに：

<div id="iWrapper" style="overflow: auto;">
    test test
</div>

または、スタイルシートに追加します。

于 2011-03-24T13:13:27.310 に答える