グリッドベースのデザインを使用した最大幅と最小幅の弾性レイアウト

右端の列が固定されるように、4列のレイアウト（ページの全幅を取るmasteadとfooterに加えて）を作成したい200pxなどは、最小幅= 960ピクセル、最大幅= 1216ピクセルの流体を使用しています。グリッドベースのデザインを使用した最大幅と最小幅の弾性レイアウト

これは、ブラウザのウィンドウが960ピクセル以上1216ピクセル未満の場合、レイアウトは液体レイアウトのように機能することを意味します。ブラウザウィンドウが1216を超えると、幅= 1216ピクセル、ブラウザビューポートの中央にページがある固定レイアウトとして機能します。ブラウザウィンドウが960ピクセル未満に縮小されている場合、最小幅は960ピクセルなので、下部の水平スクロールバーが表示されます。

ウェブサイトのレイアウトを開発するグリッドシステムが好き（例：http://960.gs/）。

私のWebページ上のDOCTYPEは<!DOCTYPE html>（別名HTML5 DOCTYPE）

ソリューションはIE 6 7 8 9及びFF、サファリ、クロム、オペラのために働く必要だろう。

これは私が探しているものを明確にすることを望んでいます。

上記の条件に基づいてこの問題を解決する方法はありますか？

私はGoogleを調査しましたが、解決策は見つかりませんでした。私は最大幅の3列のようなソリューションを見つけましたが、グリッドシステムはなく、あまりにも不器用でした。

後で私は小さな画面（モバイルデバイス）のサポートを追加する必要があります。これは、表示する列を設定する必要がありません：なし、メディアクエリを使用して他の列を重ねることです。

出典

2011-01-17 ace

IE6のためのすべての種類の 'max-width'ハックがあります。あなたはどんな研究をしましたか？これまでに何を試しましたか？私たちはあなたのためにシステム全体を構築するつもりはありません。それはSOの仕組みではありません。 – meagar

無関係な注記では、960グリッドシステムは愚かであり、セマンティクスからの表示をデカップリングするCSSの明示的な意図に反する。 – meagar

IE7/8とChrome、Firefox、Opera、Safariの最新バージョンでこれをテストしました。

min-widthとmax-widthのため、これはIE6では動作しません（@meagarと同じように） - これを回避するための詳細なオンラインリソースがあります。私のコードの残りの部分があなたに合っていない限り、私は自分自身でこれを行う努力を費やすつもりはありません。また、私はCSSグリッドシステムの使用に関心がありません。
Live Demo（背の高い流体列を持つ）

HTML（背の高い右列を持つ）

Live Demo：

<div id="container"> 
    <div id="header">header</div> 
    <div id="fluidColumnContainer"> 
     <div class="column">column 1</div> 
     <div class="column">column 2</div> 
     <div class="column">column 3</div> 
    </div> 
    <div id="fixedColumn">i'm 200px wide!<br />o<br />o<br />o<br />o</div> 
    <div id="footer">footer</div> 
</div>

CSS：

html, body { 
    margin: 0; 
    padding: 0; 
    border: 0 
} 
#container { 
    margin: 0 auto; 
    min-width: 960px; 
    max-width: 1216px; 
    overflow: auto 
} 
#fluidColumnContainer { 
    padding: 0 200px 0 0 
} 
#fixedColumn { 
    width: 200px; 
    float: right 
} 
.column { 
    float: left; 
    width: 33% 
} 
#header { 
    height: 90px 
} 
#footer { 
    height: 90px; 
    clear: both 
}

出典

2011-01-17 15:02:55 thirtydot

このデザインは非常にきれいに見えますが、コストがかかります。本番システムで行う必要のある余白やパディングボーダーを追加した後では機能しません。 – ace

また、グリッドシステムに基づいていませんが、私は仕事と柔軟なデザインだけでなく、クリーンなデザインを持っている場合、私はグリッドシステムを忘れることができます。 – ace

私はすべての列と中央の列にいくつかのコンテンツにマージンを追加した後、私は意味しない、列3は1列の下に行く！ – ace

グリッドベースのデザインを使用した最大幅と最小幅の弾性レイアウト

答えて

関連する問題