个人中心
gpt4 book ai didi

html - 为什么我的页脚没有粘在页面底部？

转载 作者：行者123 更新时间：2023-11-28 08:01:25 26 4
gpt4 key购买 nike

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

我花了太长时间试图让我的页脚贴在我的网页底部。网上有很多告诉我如何去做，但没有一个奏效。我一定是做错了什么。无论如何，这是代码。这并不多。请告诉我我在这里做错了什么。提前致谢。

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 */
}

最佳答案

要使元素具有粘性，您需要使用 position: fixed;(而不是 position: absolute;):

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

关于html - 为什么我的页脚没有粘在页面底部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29736600/

26 4 0
文章推荐： html - 与流体容器内 Logo 的相对定位
文章推荐： html - 在文本内容和我的页脚栏之间提供
文章推荐： jquery - 底部原点固定的 CSS 定位和缩放图像
文章推荐： c++ - 将巨大的 boost dynamic_bitset vector 写入文件并将其读回的有效方法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com