私はHTMLレイアウトを作りたいHTMLレイアウトの問題

Question

が、これはイメージです：

ページ全体のdivを含める：

Head 
left 
main01 
main02 

そして、制御DIV：

toogle_bar1 
toogle_bar2 

今私は次のような効果を作りたいと思っています：

1） headブラウザの指定された高さ（たとえば50ピクセル）をとり、ブラウザの幅を100％とします。 2）デフォルトでは、main02は表示されないため、main01 divは同じ高さのleftをとり、左の幅をとります。

3）toggle_bar1をクリックすると、left）は、それが表示されていないと、main01（及びmain02main02場合が表示され、表示/非表示すべきは、ブラウザのすべての幅を取ります。

4）toggle_bar2をクリックすると、main02は表示/非表示になります。一度表示されると、main01と同じ幅になります。

5）main01およびmain02には、明示的にwidthおよびheightプロパティが必要です。 6）ウィンドウのサイズが変更されても、スクロールバーは表示されません。

実際、私はJavaScriptを使って作ることができますが、私は純粋なCSSを使って作ることができるのでしょうか（もちろん、jsはclickイベントを処理する必要があります）？

今、私はJSを使用しているのでtoggle_bar1がクリックされたとき、私は、「表示：なし」にleftを設定し、その後clientwidthをcaculate、およびmain01（または/およびmain02）の幅を設定し、この場合、私は疑問に思いますブラウザで表現できますか？

私は、ブラウザで行うことができれば、私たちは余分なポジションを避けるべきだといつも思っています。

アイデア？

Answer 1

は、あなたがメインラッパーに削除CSSクラスを追加することができます。

レッツは、あなたがMainWrapper、そこに「左」、「中」、「右」

を持っていると言う、あなたは、あなたが持っているだろうかMainWrapperから

.left-item, .right-item, .middle-item { // this are the classes in the Wrapper 
some base info 
} 

.has-left.has-middle .left-item { 
width:30%; 
} 
.has-left.has-middle .middle-item { 
width:70%; 
} 
.has-left.has-middle .right-item { 
display:none; 
} 

をCSSクラスを追加または削除することができます他の組み合わせと関連させるには、知っておくべきです。

いいえjsを使用してCSSクラスを「追加」または「削除」するだけで、cssがそれを行います。 MainWrapperクラス：has-left、has-middle、has-right のいずれかを削除すると、CSSが調整されます。

これは一般的なバージョンが必要ないように聞こえるので、これは可能です。

Answer 2

あなたはスタイリングにこれらのいずれかを試みることができる：たぶん

a 
a:link 
a:focus 
a:hover 
a:visited 
a:active 

...