Question

我的屏幕左侧有一个导航列表，但是这个列表与我的页脚重叠。我希望我的页脚放置在页面底部的中央，在此下方，导航。

这是我的导航和我的CSS页脚：

#playerMenu{
    position:absolute;
    left:10px;
    top:245px;
    list-style-type:none;
    text-align: center;
    color: white;
    width:240px;
    font-family: sans-serif;
    font-size: small;
    background: #4b4d59;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    background: linear-gradient(top, #535561 0%, #1f1f23 100%);
    background: -moz-linear-gradient(top, #535562 0%, #202023 100%);
    background: -webkit-linear-gradient(top, #535562 0%, #202023 100%);
    background: -ms-linear-gradient(top, #535562 0%, #202023 100%);
}



#playerMenu ul {
    list-style-type:none;
    padding:0;
}

#playerMenu li a{
    transition: color .3s ease;
    -moz-transition: color .3s ease;
    -webkit-transition: color .3s ease;
    -ms-transition: color .3s ease;
    border-bottom: : 1px solid #393942;
    border-top: 1px solid #393942;
}

#playerMenu a {
    display:block;
    color: white;
    padding: 4px 4px;
    text-decoration: none;
    font-family: sans-serif;
} 




.footer {
    width: 680px;
    height: 20px;
    margin:auto;
}

.footerContent {
    font-family: sans-serif;
    color: #FFF;
    float:left;
    width:100%;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: linear-gradient(top, #535561 0%, #1f1f23 100%);
    background: -moz-linear-gradient(top, #535562 0%, #202023 100%);
    background: -webkit-linear-gradient(top, #535562 0%, #202023 100%);
    background: -ms-linear-gradient(top, #535562 0%, #202023 100%);   
}

.footer p {
    float:left; width:100%; text-align:center;
}

Answer 1

将所有内容放在容器div中，然后将页脚放在另一个div中：

<body>
<containerdiv>
<!-- All content -->
</containerdiv>
<footer>
</footer>
</body>

停止导航重叠页脚

1 个答案: