Question

我试图让我的页脚保持固定在我的页面底部+不覆盖我的任何内容。

这是我的HTML

<section id="adminpanel">
        <!--Drop down-->
        <!--Button-->
        <!--Drop down-->
        <!--Button-->
        <!--Drop down-->
        <!--Button-->
</section>
<!--This is the content section-->
<div class="content">
        <div id="accounts">
            <!--content-->
        </div>
        <div id="facilities">
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
        <div id="accordion">
             <h3>section 1</h3>
            <div>
                <!--content-->
            </div>
             <h3>section2</h3>
            <div>
                <!--content-->
            </div>
             <h3>section3</h3>
            <div>
                <!--content-->
            </div>
             <h3>section4</h3>
            <div>
                <!--content-->
            </div>
        </div>
    <div id="users">
        <!--content-->
    </div>
    <div id="newaccount_form">
        <!--form-->
    </div>
    <div id="newfacility_form">
        <!--form-->
    </div>
    <div id="newuser_form">
        <!--form-->
    </div>
</div>
<footer>
    <p>Copyright &copy</p>
</footer>

和我的CSS

html, body {
    height:100%;
    min-height: 100%;
    background-color:grey;
    margin: 0;
    padding: 0;
    border: 0;
}

#adminpanel {
    line-height:30px;
    background-color:#eeeeee;
    height:100%;
    width:15%;
    float:left;
}
.content {
    position: relative;
    width:85%;
    min-height: 100%;
    float:left;
    background-color:silver;
}
footer {
    text-align:center;
    position: fixed;
    padding:5px;
    left:0px;
    bottom:0px;
    width:100%;
    background: #999999;
}

以下是我目前工作的JSFiddle。

请注意第4节是如何被我的页脚掩盖的。

我该如何防止这种情况？

Answer 1

将margin-bottom添加到.content，其值等于footer的高度：

html, body {
    height:100%;
    min-height: 100%;
    background-color:grey;
    margin: 0;
    padding: 0;
    border: 0;
}

#adminpanel {
    line-height:30px;
    background-color:#eeeeee;
    height:100%;
    width:15%;
    float:left;
}
.content {
    position: relative;
    width:85%;
    min-height: 100%;
    float:left;
    background-color:silver;
    margin-bottom: 60px;
}
footer {
    text-align:center;
    position: fixed;
    padding:5px;
    left:0px;
    bottom:0px;
    width:100%;
    background: #999999;
}

<section id="adminpanel">
        <!--Drop down-->
        <!--Button-->
        <!--Drop down-->
        <!--Button-->
        <!--Drop down-->
        <!--Button-->
</section>
<!--This is the content section-->
<div class="content">
        <div id="accounts">
            <!--content-->
        </div>
        <div id="facilities">
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
        <div id="accordion">
             <h3>section 1</h3>
            <div>
                <!--content-->
            </div>
             <h3>section2</h3>
            <div>
                <!--content-->
            </div>
             <h3>section3</h3>
            <div>
                <!--content-->
            </div>
             <h3>section4</h3>
            <div>
                <!--content-->
            </div>
        </div>
    <div id="users">
        <!--content-->
    </div>
    <div id="newaccount_form">
        <!--form-->
    </div>
    <div id="newfacility_form">
        <!--form-->
    </div>
    <div id="newuser_form">
        <!--form-->
    </div>
</div>
<footer>
    <p>Copyright &copy</p>
</footer>

Answer 2

将padding-bottom添加到与页脚相同或更高的正文，如下所示：

https://jsfiddle.net/xxzhj54g/1/

这样可以防止页脚在每种情况下与主体重叠

Answer 3

给底部一个固定的高度

height:100px

并给.content一个底部的底部

margin-bottom:100px

页脚覆盖了我的内容

3 个答案: