CSS：锁定盒子？

___________div class=MAIN_________________ 

div id=LEFT     div id=RIGHT 
__________________________________________

我怎样才能achive主+左+右框中的所有底部粘合在一起？CSS：锁定盒子？

基本上锁定底部，说如果在左框中大量的内容 - >右边的框中会一起成长与左，主箱。

__跟进__

我不知道如何正确地落实到我的代码:(

http://jsfiddle.net/v572V/

，所以它看起来很凌乱我抄了整个CSS文件。但是，箱子是如下

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

来源

2012-04-19 Ben

请参阅：http://stackoverflow.com/questions/3769171/css-holy-grail-layout – Sampson 2012-04-19 19:31:36

什么是您支持的最低版本的IE。这有很大的不同。 – 2012-04-19 22:58:44

可能有所帮助的其他详细信息。任何宽度是固定的？ – 2012-04-19 23:00:38

你的意思是这样的：http://jsfiddle.net/teresko/EkTVv/

这就是所谓的“圣杯布局”的变化。应该适用于所有浏览器，包括IE6。布局将扩大以适应最长的部件。如果内容比浏览器的高度短，那么布局将扩展到浏览器的高度。

来源

2012-04-19 19:47:45

这正是我的意思。谢谢！ :) – Ben 2012-04-20 06:45:20

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-19 19:47:17 rlemon

teresko的答案更完整..我会检查他的CSS ..（比我的清洁更多） – rlemon 2012-04-19 19:49:25

CSS：锁定盒子？

回答

相关问题