0

我的页脚背景有问题。似乎#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/

4

3 回答 3

3

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

#pagefooter {
    background-color: #1a1a1a;
    padding: 25px 100px;
    overflow: auto;
}
于 2013-09-08T20:32:04.803 回答
1

据我所知，pagefooter 的高度从未设置过。在#pagefooter 中添加一行，以明确说明您想要的高度：

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

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

于 2013-09-08T20:30:21.640 回答
0

有时我会遇到溢出问题：自动。如果你这样做了，另一种处理方法是在 . 它可以只是<div style="clear:both"></div>。（我通常会创建一个具有 clear:both 的类“.clear”。只需使用 a 进行测试<div class="clear"></div>以查看浮动是否是问题，就可以轻松解决此类问题。

于 2013-09-09T15:09:01.077 回答