Question

我已将页脚的背景颜色更改为黄色，但代码无法正常工作。过去2个小时我一直在研究这个问题。请不要打击我！只是帮忙。感谢。

<!DOCTYPE html>
<html>
<head>
    <style>
            #footerMain{
                min-width: 1000px;
                background-color: yellow;
            }

            .footerLeft{
                position: absolute;
                height: 20px;
                width: 80px;

            }

            .footerRight{
                position: absolute;
                margin-left: 800px; 
                height: 20px;
                width: 80px;

            }

    </style>
</head>
<body>
    <footer id="footerMain">
        <div class="footerLeft">
            <h1>Hello</h1>  
        </div>
        <div class="footerRight">
            <h1>Bye</h1>
        </div>
    </footer>
</body>

Answer 1

因为你使用绝对位置;所以基本上#footerMain没有高度，但是，你最好不要使用位置绝对，更强大的方式是浮动属性

#footerMain{
                min-width: 1000px;
                background: yellow;
                height: 100px; /* add height & add more height, because h1 has margin */
            }

            .footerLeft{
                float: left; /*remove position: absolute;*/
                height: 20px;
                width: 80px;

            }

            .footerRight{
                float: right; /*remove position: absolute;*/
                height: 20px;
                width: 80px;
            }

<footer id="footerMain">
        <div class="footerLeft">
            <h1>Hello</h1>  
        </div>
        <div class="footerRight">
            <h1>Bye</h1>
        </div>
    </footer>

Answer 2

您的#footerMain元素仅包含absolute个定位元素。因此，就布局而言，它被认为是空的。因此，它的高度为零，使其不可见。

为它添加一些高度 - 可能20px以匹配元素的高度。

Answer 3

将高度规则添加到footerMain，例如40px

Answer 4

试试这个，HTML

<footer id="footerMain" class="clearfix">
        <div class="footerLeft">
            <h1>Hello</h1>  
        </div>
        <div class="footerRight">
            <h1>Bye</h1>
        </div>
    </footer>

CSS：

.clearix{
    zoom:1;
}

.clearfix:after, .clearfix:before{
    line-height: 0;
    content: '';
    display: table;
}

.clearfix:after{
    clear:both;
}



#footerMain{
    background-color:yellow;
}

div.footerLeft{
    width:50%;
    float:left;
}

div.footerRight{
    width:50%;
    float:right;
}

页脚中未设置背景颜色

4 个答案: