Question

CSS：

/* ================================================================ Pre-footer Advert pfa =========================================================== */
#pre-footer-ad-container {
    width: 95%;
    height: 100px;
    margin-left: 2.5%;
    margin-right: 2.5%;
}

.pre-footer-ad {
    width: 100%;
    height: 100px;
}

/*  SECTIONS  */
.sectionpfa {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */
.colpfa {
    height: 100px;
    display: block;
    float:left;
    margin: 1% 0 1% 1%;
    background-color: #f00;
}

.colpfa:first-child { margin-left: 0; }


/*  GROUPING  */
.grouppfa:before,
.grouppfa:after {
    content:"";
    display:table;
}
.grouppfa:after {
    clear:both;
}
.grouppfa {
    zoom:1; /* For IE 6/7 */
}           

/*  GRID OF TWO  */
.pfaspan_2_of_2 {
    width: 100%;
}
.pfaspan_1_of_2 {
    width: 49.5%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .colpfa { 
        margin: 1% 0 1% 0%;
    }
}

@media only screen and (max-width: 480px) {
    .pfaspan_2_of_2 {
        width: 100%; 
    }
    .pfaspan_1_of_2 {
        width: 100%;
    }
}

/* ================================================================ Footer Content ================================================================ */
#footer-container {
    margin-top: 40px;
    width: 100%;
    height: auto;
    background-color:#16a085;
    color: #ffffff;
}

.footer {
    width: 95%;
    height: 300px;
    margin-left:2.5%;
    margin-right: 2.5%;
    background-color:#16a085;
}

/*  SECTIONS  */
.sectionfooter {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */
.colfooter {
    display: block;
    float:left;
    margin: 1% 0 1% 2%;
}
.colfooter:first-child { margin-left: 0; }


/*  GROUPING  */
.groupfooter:before,
.groupfooter:after {
    content:"";
    display:table;
}
.groupfooter:after {
    clear:both;
}
.groupfooter {
    zoom:1; /* For IE 6/7 */
}



/*  GRID OF THREE  */
.footerspan_3_of_3 {
    width: 23%;
}
.footerspan_2_of_3 {
    width: 24%;
}
.footerspan_1_of_3 {
    width: 49%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .colfooter { 
        margin: 1% 0 1% 0%;
    }
}

@media only screen and (max-width: 480px) {
    .footerspan_3_of_3 {
        width: 100%; 
    }
    .footerspan_2_of_3 {
        width: 100%; 
    }
    .footerspan_1_of_3 {
        width: 100%;
    }
}

HTML：

<!-- Pre-Footer Advertisement pfa -->
    <div id="pre-footer-ad-container">
        <div class="pre-footer-ad">
            <div class="sectionpfa grouppfa">
                <div class="colpfa pfaspan_1_of_2">
                    This is column 1
                </div>
                <div class="colpfa pfaspan_1_of_2">
                    This is column 2
                </div>
            </div>
        </div>
    </div>

    <!-- Footer Content -->
    <div id="footer-container">
        <div class="footer">
            <div class="sectionfooter groupfooter">
                <div class="colfooter footerspan_1_of_3">
                    Testimonials
                </div>
                <div class="colfooter footerspan_2_of_3">
                    Legal
                </div>
                <div class="colfooter footerspan_3_of_3">
                    Other Links
                </div>
            </div>
        </div>
    </div>

问题定义：

有两个部分： 1.红色的列 2.扭矩颜色的列

他们很敏感。当我减小屏幕的宽度时，红色的宽度与扭矩的重叠。

我不想发生这种情况!!!

我希望当网站显示在移动屏幕上时，红色和扭矩区域不应重叠。

目前，当我降低屏幕分辨率时，红色的一个低于另一个，这是完美的。但同样的扭矩也应该发生。

请帮助!!!

Answer 1

只需清除页脚容器

即可

#footer-container {
    margin-top: 40px;
    width: 100%;
    height: auto;
    background-color:#16a085;
    color: #ffffff;
    clear: both; /* <--- */
}

FIDDLE

Answer 2

使用min-height代替考试身高，或通过查询重置height。

Tes min-height：http://jsfiddle.net/N7nj5/1/

响应部门重叠

问题定义：

2 个答案: