1

最小化/サイズ変更/移動できるWebページ上のクラシックウィンドウのようなポップアップdivを作成します。

高さ25ピクセルのヘッダー、高さ50ピクセルのフッターが必要です。その後、ウィンドウの本体は常に「残り」を取ります。これは、ウィンドウのサイズを変更できるため、可変です。このウィンドウの本体は、要素を追加できるDOMを動的に更新します。結合された高さがウィンドウの本体に割り当てられた高さを超えるのに十分な要素が追加された場合、このボディ領域はスクロールを開始する必要があります。ユーザーがスクロールすると、フッターは常に所定の位置に留まります。つまり、スクロールしているのはボディコンテンツだけです。

CSS、jQueryを使用してこれを実現する方法と、IE8で機能する方法を教えてください。

コードは基本的に次のようになります。

<div id="wrap">
  <div id="header">
    ... 25 px high space fixed to the top
  </div>
  <div id="body">
    ... stretches to fill the space available height/width ... 
    ... scrollbars available when the body content exceeds height available ...
    ... jQuery allows user to resize the whole window, so this body should always fill ...
  </div>
  <div id="footer">
    ... 50px footer with controls, must always be fixed to bottom of window ...
    ... must never move no matter if the user scrolls the body ...
  </div>
</div>

クロスブラウザで動作するようにこれを実現できますか？IE8 +、Firefox、Chrome？

4

1 に答える 1

3

http://jsfiddle.net/XfPAG/4/でデモを試してください。アイデアは絶対位置を使用しています：

HTML

<div id="wrap">
  <div id="header">
    ... 25 px high space fixed to the top
  </div>
  <div id="body">
    ... stretches to fill the space available height/width ... 
    ... scrollbars available when the body content exceeds height available ...
    ... jQuery allows user to resize the whole window, so this body should always fill ...
  </div>
  <div id="footer">
    ... 50px footer with controls, must always be fixed to bottom of window ...
    ... must never move no matter if the user scrolls the body ...
  </div>
</div>

CSS:

#wrap, #header, #body, #footer {
  position: absolute;
  left: 0;
  right: 0;
}

#wrap {
  top: 0;
  bottom: 0;
}

#header {
  height: 25px;
  top: 0;
}

#footer {
  height: 50px;
  bottom: 0;
}

#body {
  top: 25px;
  bottom: 50px;
  overflow: auto;
}
于 2013-01-09T03:09:22.667 に答える