0

如果浏览器宽度为 1024 - 一切正常，但是当我将其调整为 600 像素时 - 页脚的背景不会垂直扩展，并且下面的“需要帮助”和“加入我们”部分没有背景颜色......如何增加如果调整大小，页脚的高度会自动发生吗？

目前它看起来是这样的（我在页面上“全选”以显示白色文本） 实际结果

但我希望页脚高度扩展为如下所示： 期望的结果

提前致谢。

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>
4

2 回答 2

1

问题源于页脚不包含浮动的事实。尝试以下操作；

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

http://jsfiddle.net/Hk26d/

于 2013-08-12T11:22:09.430 回答
0

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

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

所以我在 .copyright 中摆脱了 float:right 并且它起作用了！

于 2013-08-12T10:38:46.383 回答