動的CSSレイアウト

Question

私のコンテンツエリアが動的に幅を調整するようなウェブサイトをスタイルするテクニックがあるかどうかは疑問です。

私は2つのサイドバーと1つの中央コンテンツ領域があるというシナリオです。サイドバーの1つが欠落している場合、私は、コンテンツ領域が、不在のサイドバーによって残された余分なスペースを占有したいと思います。 両方のサイドバーが欠落している場合は、コンテンツ領域を十分に拡大したいと考えています。

私は％sが潜在的な解決策になる可能性があることを知っていますが、私が上記でディスカッションしたダイナミックな拡張/縮小機能をどのように設定するかわかりません。

Answer 1

私は960 grid systemがあなたの答えだと思います。それを見てみましょう。

Answer 2

多分あなたはAdaptive CSS-Layoutsのようなものを探しています。

Answer 3

私は考えることができる唯一のCSSのみのソリューションは、次のことを前提とします

1. ユーザーは隣接兄弟セレクタをサポートし、最新のブラウザを使用しています。
2. 右の列にはの前にと表示されます。

以下に示す手法は、しかしながら、それはまた、右欄の（DOMにおける）（DOM）から除去し、レクリエーションを行うためのjQueryを使用して、純粋なCSSを使用して動作します。jQueryのはありませんは、コンテンツのスタイリングやディメンションに影響を与えます（ただし、リンクが削除/再作成されたリンク内のテキストも切り替わります）。

前記、デモのHTMLマークアップは以下の通りです：

<div id="contentWrap"> 
    <div id="sidebar"> 
     <!-- navigation --> 
    </div> 
    <div id="rightColumnAndMainContent"> 
     <div id="rightColumn"> 
      <h2>References</h2> 
      <!-- a list of links --> 
     </div> 
     <div id="mainContent"> 
      <p><!-- Lorem ipsum text in the demo... --></p> 
     </div> 
    </div> 
    <div id="footer"> 
     <p><a href="#" class="remove">Remove the footer</a></p> 
</div> 

とCSS：

#contentWrap { 
    width: 900px; 
} 

#sidebar { 
    float: left; 
    width: 110px; 
} 

#rightColumnAndMainContent { 
    position: relative; 
    margin-left: 120px; 
} 

#rightColumn { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #f00; 
    width: 140px; 
} 

#mainContent { 
    background-color: #ffa; 
    margin-right: 0; 
} 

#rightColumn + #mainContent { 
    margin-right: 150px; 
} 

#footer { 
    text-align: center; 
    clear: both; 
    border-top: 6px solid rgba(0,0,0,0.6); 
} 

隣接兄弟セレクタ（#rightColumn + #mainContentが基本idより具体的であるように、これは動作します-selector（#mainContent）。これは、#mainContentが定義されたmargin-right: 0;を持っている間に、それが無効になったことを意味します。#mainContentのすぐ後に#rightColumnが続きます。#rightColumnがマークアップ内にある場合にのみ実行できます。

これはクルージングを感じますが、少なくとも機能します（少なくともJS Fiddle demoの範囲内）。

---

参考文献：

• adjacent-sibling + CSS selector。
• Adjacent-sibling selector cross-browser support。

Answer 4

display: table-cell簡単にこれを行うことができます。ブラウザのサポート：http://caniuse.com/css-table

を参照してください：http://jsfiddle.net/3FW6w/

<div class="container"> 
    <div class="leftSidebar">left</div> 
    <div class="content">content</div> 
    <div class="rightSidebar">right</div> 
</div> 

.container { 
    border: 2px solid #f0f; 
    width: 400px; 
    margin: 0 auto; 
    display: table 
} 
.container > div { 
    border: 2px dashed #444; 
    display: table-cell 
} 
.leftSidebar, .rightSidebar { 
    width: 80px 
}