11

縦に分割されたHTMLページがあります

  • ヘッダ
  • 体
  • フッター

体は水平に分割されています。

  • スクロールバーに囲まれた左側の大きな DIV。ダイアグラムの一部を表示
  • 右側のフォーム

ヘッダーとフッターの高さは固定です。ヘッダーとフッターで占有されていないウィンドウの部分を埋めるために、本文を垂直方向に拡張する必要があります。

同様に、フォームは固定幅であり、スクロール ペインはウィンドウの幅いっぱいに水平方向に拡張する必要があります。

ダイアグラムは非常に大きい (最大 10x10 画面いっぱい) ため、すべてを表示することはできません。代わりに、ユーザーがスクロールする必要ができるだけ少なくなるように、(ウィンドウ全体を使用して) できるだけ多く表示したいと考えています。

一部のユーザーは必然的に偏執的であり、無効にする必要があるため、javascriptも使用できません。

私が検討したいくつかのオプション：

  • スクロール ペイン セルの幅と高さが 100% に設定され、その他すべてが 1% に設定されているテーブルは
    機能しません。テーブル (およびページ) は、スクロール ペインの DIV に絶対位置を指定しても、ダイアグラム全体を含むように拡張されます。
  • フッターの高さでページの下部からペインをオフセットする絶対配置 機能しますが
    、不正確です。フッターの高さは、現在のフォント サイズとテキストが折り返されているかどうかによって異なります。これは、それらが重ならないように、大きなマージンを残す必要があることを意味します。
  • ダイアグラムを IFRAME に配置するスクリプトを無効にして見つけた最良のソリューションですが、スクリプトを
    有効にするとスクリプトでできることが制限されます。

スクリプトが無効になっている場合、Google マップがマップに固定サイズの領域を使用していることに気付きました。Google がこの問題をあきらめたということは、実現不可能ということですか?

4

2 に答える 2

11

height: 100% CSS 属性を使用すると、機能するはずです。

CSS を使用した Dave Woods の 100% Height Layoutが機能するかどうかを確認してください。

于 2009-02-15T16:58:02.600 に答える
4

position: absolute;これは、探しているレイアウトを提供する CSS プロパティのあまり知られていない側面です。上、右、下、左の 4 方向すべてにエレメントを絶対に配置できます。これは、ボックスがブラウザーと同じくらい流動的であり、指定したコンテナーの端から常に同じ距離を保つことができることを意味します。

div {
    position: absolute;
}
#main {
    top: 8em; // 8em
    left: 0; 
    bottom: 8em; // 8em
    right: 300px;
    overflow: auto;
}
#header {
    top: 0;
    left: 0;
    right: 0;
    height: 8em;
}
#sidebar {
    top: 8em;
    right: 0;
    bottom: 8em;
    width: 300px;
    overflow: auto;
}
#footer {
    bottom: 0;
    left: 0;
    right: 0;
    height: 8em;
}

例については、 http://www.sanchothefat.com/dev/layouts/cssframes.htmlをチェックしてから、ソースを表示し、CSS を分解して、より複雑な例でどのように行われているかを確認してください。

このアプローチを取る場合、すべてのメイン コンテナを絶対に配置する必要があります<div>。font-size が問題になる場合は ems を使用してください。

PS。IE6 が台無しになるという落とし穴があります (ショック!) が、私が提供した例には IE6 フォールバックがあります。高さを固定するだけでもOKです。

于 2009-02-15T17:03:49.653 に答える