0 
___________div class=MAIN_________________

div id=LEFT                   div id=RIGHT
__________________________________________

MAIN + LEFT + RIGHTボックスのすべての底が接着されていることをどのように達成できますか？

基本的に下部をロックします。たとえば、LEFTボックスにコンテンツがたくさんある場合は、LEFTボックスとMAINボックスとともにRIGHTボックスが大きくなります。

__ ファローアップ __

コードに正しく実装する方法がわかりません:(

http://jsfiddle.net/v572V/

CSSファイル全体をコピーしたので、非常に乱雑に見えます。しかし、箱は次のとおりです

<div class="content home">
<div id="main">
<div id="sidebar">
4

2 に答える 2

7

このような意味ですか：http：//jsfiddle.net/teresko/EkTVv/

これは、いわゆる「ホーリーグレイルレイアウト」のバリエーションです。IE6を含むすべてのブラウザで動作するはずです。レイアウトは、最も長いパーツに合わせて拡張されます。コンテンツがブラウザの高さよりも短い場合、レイアウトはブラウザの高さまで拡張されます。

于 2012-04-19T19:47:45.653 に答える
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。

于 2012-04-19T19:47:17.723 に答える