ビューポートに拡張する簡単なCSSレイアウトを構築する方法

css html xhtml

下のワイヤーフレームで見ることができるHTML / CSSを使用して、この非常に単純な(視覚的に言えば)レイアウトを構築しようとしています。

/ ------------------------------------------ \
|                                          |
|                header div                |
|                                          |
|------------------------------------------|
|                                       |S |
|                 main div              |C |
|                                       |R |
|                                       |O |
|                                       |L |
|                                       |L |
|                                       |  |
|                                       |B |
|                                       |A |
|                                       |R |
\ ------------------------------------------ /

それは水平方向にビューポートの100%を埋める200ピクセルの高さの “header” DIVを持っていて、その下は “auto”に設定されたスクロールで残りの空きスペース(水平方向と垂直方向)の100%を埋める “main” DIVです。あふれているコンテンツを説明するため。

難しい部分は、JavaScriptを使用せずにこの残りのスペースを埋めるための「メイン」DIVを取得することです。 実際にパーセンテージの高さを使用しても、スクロールバーが完全に表示されるようにすることはできません。

この時点で、それが唯一の非JSオプションになるのであれば、レイアウトのこの基本部分にはテーブルを使用したいと思います。 意味論は問題にならない。

じゃあどうやってこれをやろうか? 例も素晴らしいでしょう!

  2  0


ベストアンサー

静的な高さを設定することによって、つまりjavascriptの使用を禁止することによってのみ、そのような動作を実現できると思います。 データはオーバーフローしないため、静的な高さなしでスクロールバーが表示されます。 あなたがIframeを使って何かをしたのでなければ、それはロード時間が増えるからといってお勧めできません。

0


何かを考え出してみて、私が見つけることができる最も近いピュアCSSソリューションは、両方の高さにパーセントを使用し、200pxにヘッダーの最小の高さを設定することです。 しかし、ビューポートが思ったほど大きくない場合、一番下のdivはわずかに折り畳みを超えてしまいます。

ここでの良い解決策は、あなたの統計を調べて、あなたの訪問者が最もよく使うスクリーンの高さが何であるか、おそらく800pxを計算することです。 それからこのようなものを設定してください

#head {高さ:25%(上の図によって異なります)最小高さ:200px。 #body {身長:75%; }

これはあなたのデザインがほとんどの場合完璧に動作することを保証するでしょう。

なぜ誰かがこの日と年齢で倍以上にすべてを保ちたいと思うのは正直に言うと私を避けます。 私たちはみんなスクロールにかなり慣れてきていて、現代のワイドスクリーンデザインではスクロールはかなり遍在しています

0


ディスプレイ:テーブルまたはhttp://www.ironmyers.com/layouts/100_percent_Layouts/

0


私はあなたがこのようなよくテストされたレイアウトを試してみることを勧めます:http://www.cssplay.co.uk/layouts/basics2.html

それがどのように行われているかがわかります。

0


私はちょうど似たようなことをしました(クライアントの仕事、例を表示できない、ごめんなさい…​)。

#head {margin-top:0;左余白:0;右マージン:0。高さ:200ピクセル。 }

#body {margin:200px 0 0 0;トップ:200px。 }

0


タイトルとURLをコピーしました