CSS Elastic Fluid Layoutは、さまざまなコンテンツディスプレイを満たしています

今日、ユーザーのモニターが大きくなっているとき、以前の1024*768ソリッド幅のレイアウトは、大きな画面を持つユーザーにとってますます多くなります。 。

もちろん、この種の画面の無駄を減らすために、弾性流体レイアウトを採用することが最良のソリューションです。ただし、さまざまな制限により、現在のWebページには、流体の弾性レイアウトを完全に採用するための条件が完全に装備されていません（特にブラウザメーカーによる基準の不cru慎な破壊と、CSS基準の不完全なサポートなど）。ユーザーとメーカーの間の仲介者として、私たちは互換性のある態度で2つの間のギャップにのみ適応することができます。したがって、移行ソリューションとして、このようなレイアウトがあります：弾性 +固体幅レイアウト。

ここで言及した弾力性は、画面幅に適応する背景を指しますが、固体幅は、メインコンテンツを広い画面と狭い画面の両方に自動的に中心にすることができることを意味します。さまざまなサイズと解像度のユーザーのニーズを満たすために、ギャップで生き残ります。以下の図に示すデザインは、典型的な例です。

ナンセンスを減らして、ポイントに戻りましょう。このようなレイアウト構造を作成しましょう。

最初に構造層を構築します：

通常、Webページには、ヘッダーとコンテンツを装着し、フッターと名前を付けたフッターに分析しますこのように設計するには、コンテンツ領域が1つ未満の場合、このフッターを絶対に下にしたいと思います。

画面の幅に自動的に適応するために、ラッパーとフッターのコンテナを幅100％に設定します。また、ヘッダーヘッダー領域を幅100％に設定します。このようにして、ヘッダーとフッターの背景をヘッダーとフッターに水平にタイル張りの画像を挿入できます。

主なコンテンツとして、私たちの一般的なアプローチは、解像度が大きくなったときに中央に集中させ、両側に空白を離れることです。ヘッダー領域は100％の幅に設定されているため、ヘッダーにコンテナレイヤーを追加します。ヘッダーは、実際のヘッダーテキストコンテンツのキャリアとして機能し、960ピクセルの幅などを設定します。自動的に中心にします。

このようにして、ヘッダーのテキストは、これらの2つの層の上層層をフロートします。

同様に、フッターをこのように実装することもできます。

上記の構造レイヤーでは、このメソッドは中間コンテンツ領域では使用しませんでしたが、コンテンツのコンテンツ領域では、コンテナが埋め込まれていないことがわかりました。もちろん、テキストの両側にあまりにも空洞に見えない場合は、ヘッダーとフッターのメソッドを使用して、そのコンテンツにDivを追加できます。もちろん、ネストを減らすために、回避策を採用することができます。ボディの背景に特大の画像を追加し、背景ポジションを使用して中央に画像を配置して、コンテンツ領域の両側の写真が表示されるようにすることができます。

このブログは、このブログの両側の写真を見て、ウィンドウを絞り込むことができます。そして、テキストの内容は常に中央に表示されます。

効果を示すために、他の色の調整を追加します。最終的なスタイルは次のとおりです。