Question

我需要帮助将页脚粘贴到页面的最底部。

我花了很长时间试图让我的页脚粘到我的网页底部。有很多在线告诉我如何做到这一点，但没有一个工作。我一定是做错了。无论如何，这是代码。这并不多。请告诉我这里我做错了什么。提前谢谢。

HTML：

<html>

<head>
    <title>
        Jim Bob - Online Portfolio
    </title>
    <!--CSS file-->
    <link rel="stylesheet" type="text/css" href="style.css">
    <!--Fonts-->
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
</head>

<body>
    <div id="wrap">
        <div id="titleScreen">
            <table id="titleTable">
                <tr>
                    <td>
                        <h1 id="title1">Jim Bob</h1>
                    </td>
                </tr>
                <tr>
                    <td>
                        <h1 id="title2"><span>ONLINE PORTFOLIO</span></h1>
                    </td>
                </tr>
            </table>
            <img id="downArrow" src="downArrow.png">
        </div>
        <div id="MyWorkDiv">
            <h3 id="myWorkTitle">My Work</h3>
            <hr>
            <img id="todayLogo" src="logoIcon.png">
            <table id="todayTable">
                <tr>
                    <td>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suo genere perveniant ad extremum; Atque ab his initiis profecti omnium virtutum et originem et progressionem persecuti sunt. Tu vero, inquam, ducas licet, si sequetur; Haec para/doca illi, nos admirabilia dicamus. Qua igitur re ab deo vincitur, si aeternitate non vincitur? Duo Reges: constructio interrete. In quibus doctissimi illi veteres inesse quiddam caeleste et divinum putaverunt. Tuo vero id quidem, inquam, arbitratu. Ille enim occurrentia nescio quae comminiscebatur; Hoc non est positum in nostra actione.</p>
                    </td>
                    <td>
                        <img id="todayImg" src="todayApp.png">
                    </td>
                </tr>
            </table>
            <hr id="workBottomLine">
        </div>


        <div id="push">YOOOOOOOOOOOOOOOOOOOOOOOOO</div>

    </div>
    <div id="footer">
        <h3 id="contactMe">Contact Me</h3>
        <hr id="footerHr">
        <table id="contactTable">
            <tr>
                <td>
                    <img id="emailImg" src="@.png">
                </td>
                <td id="myEmailTd" colspan="6">
                    <p id="myEmail">jimbob@gmail.com</p>
                </td>
            </tr>
            <tr>
                <td>
                    <img id="phoneImg" src="phone.png">
                </td>
                <td colspan="6">
                    <p id="myNumber" rowspan="6">my number here</p>
                </td>
            </tr>
            <tr id="icons">
                <td>
                    <img id="githubImg" src="github.png">
                </td>
                <td>
                    <img id="linkedinImg" src="linkedin.png">
                </td>
                <td>
                    <img id="dribbleImg" src="dribbble.png">
                </td>
                <td>
                    <img id="twitterImg" src="twitter.png">
                </td>
                <td>
                    <img id="instaImg" src="insta.png">
                </td>
                <td>
                    <img id="fbImg" src="fb.png">
                </td>
                <td>
                    <img id="googleplusImg" src="googleplus.png">
                </td>
            </tr>
        </table>
    </div>

</body>
<script src="script.js"></script>

</html>

CSS：

body {
    background-image: url("alps.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

#titleTable {
    width: 60%;
    height: 30%;
    position: absolute;
    margin-left: -30%;
    /* half of width */

    margin-top: -15%;
    /* half of height */

    top: 50%;
    left: 50%;
}

#title1 {
    font-family: 'Lobster';
    font-size: 100px;
    color: white;
    text-align: center;
    margin-bottom: 0px;
}

#title2 {
    z-index: -999;
    font-family: 'Roboto', sans-serif;
    font-size: 35px;
    color: white;
    text-align: center;
    margin-top: 0px;
    overflow: hidden;
    line-height: 2em;
}

/****** Title Lines On Side ******/

#title2 span {
    display: inline-block;
    position: relative;
}
#title2 span:before,
#title2 span:after {
    content: "";
    position: absolute;
    height: 5px;
    border-top: 3px solid;
    top: 50%;
    width: 73%;
}

#title2 span:before {
    right: 100%;
    margin-right: 15px;
}

#title2 span:after {
    left: 100%;
    margin-left: 15px;
}

/****** END OF Title Lines On Side ******/

#downArrow {
    position: absolute;
    margin-left: -37.5px;
    /* half of width */

    margin-top: -37.5px%;
    /* half of height */

    top: 85%;
    left: 50%;
}

#myWorkDiv {
    background-color: #1E2C55;
    width: 100%;
    position: absolute;
    top: 100%;
    padding-bottom: 50px;
    margin-bottom: 20%;
}

#myWorkTitle {
    font-family: 'Roboto', sans-serif;
    font-size: 50px;
    color: white;
    text-align: left;
    padding-top: 50px;
    padding-left: 50px;
    margin-bottom: 10;
}

hr {
    color: white;
    width: 92%;
    margin-left: 50px;
    margin-right: 50px;
}

#todayLogo {
    padding-top: 30px;
    padding-left: 50px;
    padding-right: 50px;
}

#todayTable {
    padding-top: 30px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
}

td {
    vertical-align: top;
    text-align: left;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 30;
}

#contactMe {
    font-family: 'Roboto', sans-serif;
    font-size: 50px;
    color: white;
    text-align: center;
    padding-left: 50px;
    margin-bottom: 0;
}

#contactTable {
    align-content: center;
    margin-left: 50px;
    margin-right: 50px;
}

#contactTable {
    padding-top: 30px;
    padding-left: 20%;
    padding-right: 20%;
    padding-bottom: 10%;
}

#contactTable td {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

#contactTable td p {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
    color: #1E2C55;
}

* {
    margin: 0;
}

html,
body {
    height: 100%;
}

#wrap {
    min-height: 100%;
    height: auto !important;
    /* This line and the next line are not necessary unless you need IE6 support */

    height: 100%;
    margin: 0 auto -440px;
    /* the bottom margin is the negative value of the footer's height */
}

#footer,
#push {
    position: absolute;
    height: 440px;
    /* .push must be the same height as .footer */
}

Answer 1

要使元素变得粘滞，您需要使用position: fixed;（而不是position: absolute;）：

#footer
{
    position: fixed;
    bottom: 0;
}

为什么我的页脚没有粘到页面底部？

1 个答案: