Question

我的页脚背景出了问题。看起来#pagefooter的高度为0，背景颜色仅应用于填充，垂直为2x 25px。

我尝试了几件事，但我找不到解决方案。这有什么不对？

/// HTML

<div id="pagefooter">
    <footer>
        <nav id="f1" class="footernav">
            <h1>Misc</h1>
            </br>
            <ul>
                <li>
                    <a href="#">Lorem</a>
                </li>
                <li>
                    <a href="#">ipsum</a>
                <li>
                <li>
                    <a href="#">dolor</a>
                </li>
                <li>
                    <a href="#">sit</a>
                </li>
                <li>
                    <a href="#">amet</a>
                </li>
            </ul>
        </nav>
        <nav id="f2" class="footernav">
            <!-- SOME MENU -->
        </nav>
        <nav id="f3" class="footernav">
            <!-- SOME MENU -->
        </nav>
        <nav id="f4" class="footernav">
            <!-- SOME MENU -->
        </nav>
    </footer>
</div>

/// CSS

#pagefooter {
    background-color: #1a1a1a;
    padding:25px 100px;
}
.footernav {
    float:left;
    width:25%;
    margin-bottom: 35px;
}

以下是一个示例：http://jsfiddle.net/AR3AC/

Answer 1

基本上，#pagefooter仅包含浮动元素，这些元素使父元素没有高度（因此没有背景颜色）。要解决此问题，请将overflow属性设置为auto：

#pagefooter {
    background-color: #1a1a1a;
    padding: 25px 100px;
    overflow: auto;
}

Answer 2

据我所知，页脚的高度永远不会设置。在#pagefooter中添加一行，这样就可以明确说明你想要的高度：

#pagefooter {
    background-color: #aaa;
    height: 100px;
    padding:25px 100px;
}

我不确定这是否能回答你的问题，但这是一个很好的起点。

Answer 3

偶尔我会遇到溢出问题：auto。如果你这样做，另一种解决方法是在之前放置一个空的清算div。它可以是<div style="clear:both"></div>。（我通常会创建一个明确的“.clear”类。两者。通过使用<div class="clear"></div>进行测试来查看浮动是否是问题，可以轻松解决此类问题。

填充与背景颜色的填充

3 个答案: