不用js也能实现几个未知高度的容器对齐

css 代码

 

1. /* easy clearing */  
2. div#content:after {   /*  overflow:hidden    must be in   div#content  */  
3.     content: '[DO NOT LEAVE IT IS NOT REAL]';   
4.     display: block;  
5.     height: 0;   
6.     clear: both;   
7.     visibility: hidden;  
8. }  
9. div#content { display: inline-block; }  
10. /*\*/  
11. div#content { display: block; }  
12. /* end easy clearing */  
13. /*\*/  
14. #secondaryNavigation,#primaryContent{   
15.     padding-bottom: 32767px !important;  
16.     margin-bottom: -32767px !important; }  
17. @media all and (min-width: 0px) {  
18. #secondaryNavigation,#primaryContent {   
19.     padding-bottom: 0 !important;   
20.     margin-bottom: 0!important;   
21. }  
22. #secondaryNavigation:before,#primaryContent:before{  
23.     content: '[DO NOT LEAVE IT IS NOTREAL]';   
24.     display: block;  
25.     background: inherit;   
26.     padding-top: 32767px!important;  
27.     margin-bottom: -32767px !important;  
28.     height: 0;   
29. }  
30. }  

content作为外层容器，secondaryNavigation，primarynavgation作为内部容器；

注意：几个容器必须是并行的，并且必须在外层容器上设置 overflow：hidden属性，几个选择器上伪类的定义不可少。
虽然看上去有些杂乱，但如果不用js也能实现几个未知容器高度的自适应 也未尝不是件巧妙的事，更重要的是在ff、ie下均有效，而且屡试不爽。