0 
___________div class=MAIN_________________

div id=LEFT                   div id=RIGHT
__________________________________________

我怎样才能实现 MAIN + LEFT + 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;   
}
​

它并不完美，但至少你可以看到这项技术在发挥作用。冰川

于 2012-04-19T19:47:17.723 回答