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

阅读更多

css 代码

/* easy clearing */
div#content:after {   /*  overflow:hidden    must be in   div#content  */
    content: '[DO NOT LEAVE IT IS NOT REAL]';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
div#content { display: inline-block; }
/*\*/
div#content { display: block; }
/* end easy clearing */
/*\*/
#secondaryNavigation,#primaryContent{
    padding-bottom: 32767px !important;
    margin-bottom: -32767px !important; }
@media all and (min-width: 0px) {
#secondaryNavigation,#primaryContent {
    padding-bottom: 0 !important;
    margin-bottom: 0!important;
}
#secondaryNavigation:before,#primaryContent:before{
    content: '[DO NOT LEAVE IT IS NOTREAL]';
    display: block;
    background: inherit;
    padding-top: 32767px!important;
    margin-bottom: -32767px !important;
    height: 0;
}
}

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

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