HTML コンテンツをウィンドウ全体に拡大する

Question

HTML ページが垂直方向に分割されています。

• ヘッダ
• 体
• フッター

次に体は水平方向に分割されます。

• スクロールバーで囲まれた左側の大きな DIV には、図の一部が表示されます。
• 右側のフォーム

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

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

図は非常に大きい (最大 10x10 画面) ため、すべてを表示することはできません。代わりに、ユーザーがスクロールする必要を最小限に抑えるために、(ウィンドウ全体を使用して) できる限り多くの情報を表示したいと考えています。

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

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

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

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

Answer 1

の高さを使用する：100％CSS属性はそれを動作させる必要があります。

。

あなたのために働くのCSSを使用している場合はデイブ・ウッズ、100％の高さのレイアウトを参照してください。ます。

Answer 2

あまり知られていない側面ですが、 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>s.フォントサイズが懸念される場合は、ems を使用してください。

PS.IE6 では問題が発生するという落とし穴があります (ショック!)。ただし、私が提供した例には IE6 フォールバックが含まれています。高さを固定するだけでも大丈夫です。