Question

如果浏览器宽度为1024 - 一切正常，但当我将其调整为600px时 - 页脚的背景不会垂直展开，而且需要帮助＆＃34;和＃34;加入我们＆＃34;下面的部分没有背景颜色......如果调整大小，如何自动增加页脚的高度？

目前它看起来像这样（我做了＃34;选择所有＆＃34;在页面上显示白色文字） actual result http://i42.tinypic.com/dmf8km.png

但是我希望页脚高度扩展到如下所示： desired result http://i41.tinypic.com/2ilhv03.png

提前致谢。

CSS

.footer {
    color: white;
    height: 200px;
    background-color: #536571;  
    font-size: 18px;            
}


.about, .contacts, .help, .join {
    float: left;
    margin-top: 15px;   
    margin-left: 50px;
}

.about {
    margin-left: 100px;

}

.join {
    max-width: 300px;   

}

.copyright {
clear: both;
float: right;
margin-right: 20px; 
}

.footer ul p {
    font-size: 24px;
    font-weight: bold;
}

.footer ul {
    list-style: none;
}

HTML

<div class="footer">        
    <div class="about">
        <ul>
            <p>About</p>            
            <li>Team</li>
        </ul>
    </div>

    <div class="contacts">
        <ul>
            <p>Contacts</p>         
            <li>info@site.com</li>
        </ul>
    </div>

    <div class="help">
        <ul>
            <p>Need help?</p>           
            <li>FAQ</li>
        </ul>
    </div>

    <div class="join">
        <ul>
            <p>Join us!</p>         
            <li>
                Subscribe now and get a discount to our premium plan!
            </li>
        </ul>
    </div>

<div class="copyright">(C) 2013 My Company</div>

</div>

Answer 1

问题源于页脚不包含浮动的事实。请尝试以下方法;

.footer {
    /* height: 200px; removed to allow the footer to stretch */
    overflow: hidden; /* a nice trick to contain floats */
}

http://jsfiddle.net/Hk26d/

Answer 2

我将高度更改为最小高度并将.copyright div更改为

.copyright {
    clear: both;
    text-align: right;
    margin-right: 20px; 
}

所以我摆脱了浮动：在.copyright内，它有效！

浏览器窗口调整大小时如何增加页脚div的高度？

2 个答案: