Question

我想在页面底部放置一个页脚。它包含在div中。问题是，如果我使用固定定位，页脚会粘在底部，但如果我向上滚动页面则不会消失。如果我使用绝对或相对定位，则页脚会显示在页面中间。

我希望它保持在底部，但它不应该是粘滞的，即向上滚动时，页脚必须消失。它必须显示我向下滚动到底部并到达页面的末尾。

PS：该页面包含iframe。

HTML

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <title>Help</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="header">
            <img id="logo" src="images/logo.png" alt="Logo">
        </div>
        <div id="menu">
            <ul>
                <li><a href="about.html" target="content">About</a></li>
                <li><a href="support.html" target="content">Support</a></li><br>
                <li>Student Operation
                    <ul>
                        <li><a href="logging_in.html" target="content">Logging In</a></li>
                        <li><a href="creating_enquiry.html" target="content">Creating Enquiry</a></li>
                        <li><a href="issuing_prospectus.html" target="content">Issuing Prospectus</a></li>
                        <li><a href="making_admission.html" target="content">Making Admission</a></li>
                        <li><a href="collecting_fees.html" target="content">Collecting Fees</a></li>
                        <li><a href="issuing_kit.html" target="content">Issuing Kit</a></li>
                    </ul>
                </li><br>
                <li>
                    Batch Operation
                    <ul>
                        <li><a href="creating_batch.html" target="content">Creating Batch</a></li>
                        <li>Marking Attendance</li>
                        <li>Transferring Batch</li>
                    </ul>
                </li><br>
                <li>
                    Resource Operation
                    <ul>
                        <li>Center Resource Allocation</li>
                        <li>Student Resource Allocation</li>
                    </ul>
                </li><br>
                <li>
                    Course Operation
                    <ul>
                        <li>Course Type</li>
                        <li>Course List</li>
                        <li>Course Module</li>
                        <li>Course Price List</li>
                        <li>Distance University List</li>
                    </ul>
                </li><br>
                <li>
                    Inventory Operation
                    <ul>
                        <li>Kit Management</li>
                        <li>Item Category</li>
                        <li>Item Stock</li>
                        <li>Item Purchase</li>
                    </ul>
                </li><br>
                <li>
                    Admin Operation
                    <ul>
                        <li>Kit Validation</li>
                        <li>Users & Groups</li>
                        <li>Employee Management</li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id="frame">
            <iframe id="content" name="content"></iframe>
        </div>
        <div id="footer">
            <p>Footer text</p>
        </div>
    </body>
</html>

CSS

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 80%;
}

#header {
    background-color: #f8651c;
    padding-bottom: 5%;
    margin: 0;
    border: 0;
}

#logo {
    position: relative;
    left: 20px;
    top: 20px;
}

#menu {
    width: 25%;
    float: left;
    border-right: 2px solid #a2a2a2;
    margin: 0;
    padding: 0;
}

#content {
    position: absolute;
    height: 93%;
    width: 74%;
    padding: 0;
    margin: 0;
    border: 0;
}

#footer{
    position: fixed;
    left: 0;
    bottom:0;
    background-color:#000;
    width:100%;
    height: 10px;

}

Answer 1

喜欢这个

<强> DEMO

<强> CSS

#footer{
    position: relative;
    left: 0;
    bottom:0;
    background-color:#000;
    width:100%;
    bottom:0;
    padding:5px 0;
}
.clearfix{
    clear:both;
}
#footer p{
    color:white;
}

Answer 2

非常简单。只需添加修改您的页脚css

#footer{
   background-color:#000;
    width:100%;
    color:#fff;
    float:left


}

Answer 3

你可以做一件事，在页面滚动一定高度或滚动事件后你可以隐藏那个div。

$(window).scroll(function(e){ $('#log').hide(); });

将页脚放在页面底部

3 个答案: