2012-04-19 7 views
0
___________div class=MAIN_________________ 

div id=LEFT     div id=RIGHT 
__________________________________________ 

MAIN + LEFT + RIGHTボックスのすべてのボトムが一緒に接着されることはありますか?CSS:ボックスをロックしていますか?

基本的にボトムをロックする、LEFTボックスに多くのコンテンツがある場合 - > LEFTボックスはLEFTとMAINボックスとともに増加します。

__ __

をフォローアップ、私はそれが非常に厄介に見えるので、私は全体のCSSファイルをコピーした

http://jsfiddle.net/v572V/

:(正しく私のコードに実装する方法を知っている。だがませんボックスは以下の通りです

<div class="content home"> 
<div id="main"> 
<div id="sidebar"> 
+1

ご覧ください:http://stackoverflow.com/questions/3769171/css-holy-grail-layout – Sampson

+0

サポートしているIEの最低バージョンは何ですか?それは大きな違いになります。 –

+0

その他の情報幅は固定されていますか? –

答えて

7

あなたはこのような何かを意味しますか。 IE6を含むすべてのブラウザで動作する必要があります。レイアウトは、パーツの最長に合わせて拡大されます。コンテンツがブラウザの高さより短い場合、レイアウトはブラウザの高さに拡大されます。

+0

これはまさに私が意味していたものです。ありがとうございました! :) – Ben

0

http://jsfiddle.net/rlemon/DjQup/

あなたはコンテナの左右の列を浮かべます。浮動小数点数をオフセットするためのパディング付きの '内側'コンテンツコンテナを用意してください。上の例を参照してください。

<div class="container"> 
    <div class="left">asd</div> 
    <div class="right">asd</div> 
    <div class="middle"> 
     <div class="middle-inner"> 
     asdf 
     </div> 
    </div> 
</div>​ 


.container { 
height: 600px; 
widht: 800px; 
background-color: #aaa; 
clear: both;  
} 
.left, .right { 
width: 100px; 
height: 100%; 
background-color: blue;  
} 
.left { float: left; } 
.right { float: right; } 
.middle { 
background-color: green; 
float: none; 
height: 100%; 
width: 100%; 
} 
.middle-inner { 
padding: 0 100px; 
} 
​ 

それは完璧ではないが、少なくとも、あなたは、劇中の技術を見ることができます。 gl。これは、いわゆる「聖杯のレイアウト」のバリエーションですhttp://jsfiddle.net/teresko/EkTVv/

+0

tereskoの答えはより完全です。私は彼のCSSを見直します。(私のものよりもはるかにクリーン) – rlemon

関連する問題