Question

我遇到了问题，我只是一个初学者，我想提高我的CSS和HTML技能，所以如果你有一些提示请在这里发布，所以我的问题是关于我的页脚，它不在正确的位置，（在页面的底部，中间）所以有人请帮帮我吗？

我的HTML：

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title></title>
    </head>
    <body>
        <div id="header">
            <p id="nome">João Pedro</p>
            <a href="mailto:jp_5_5@hotmail.fr"><p id="email">jp_5_5@hotmail.fr</p></a>
            <p id="imagem"><img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xfp1/t1.0-9/10250173_10203771744604525_8177123278861015451_n.jpg" style="width: 50px;
    height: 50px" /></p>
        </div>
        <div class="left">
            <p>Nome</p>
            <hr>
            <p>Email</p>
            <hr>
            <p>Contacto</p>
            <hr>
            <p>Sobre</p>
            <hr>
            <p>Mais</p>
            <hr>
            <p>Jogos</p>
            <hr>
            <p>Videos</p>
        </div>
        <div class="right">
            <p id=boss><img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/s720x720/564356_10200810585497398_1364591551_n.jpg" style="height: 300px"/></p>
            <div id="texto"><h3>O que é o Jejum de Jesus? -Vocês perguntam.</h3>
            <p>O Jejum de Jesus é onde nós nos santificamos a Deus para receber o Espirito Santo.</p>
            <p>Durante 40 dias iremos nos desapegar das coisas mundanas tais como:</p>
            <ul>
                <li>Internet</li>
                <li>Musica</li>
                <li>Jogos</li>
            </ul>
        </div>
        <div id="footer"></div>
    </body>
</html>

我的css：

body {
    background-color: #e7e7e7;
}

div {
    border-radius: 5px;
}

#header {
    margin: auto;
    position: relative;
    height: 60px;
    width: 98%;
    background-color: #230f65;
    margin-bottom: 17px;
}

.left {
    float: left;
    margin-left: 14px;
    position: relative;
    background-color: #bdabf8;
    width: 10%;
    height: 400px;
    margin-bottom: 17px;
}

.right {
    float: right;
    margin-right: 14px;
    position: relative;
    background-color: #dfd7f7;
    width: 86%;
    height: 400px;
    margin-bottom: 17px;
    border: 1px solid black;    
}

.left {
    text-align: center;
    padding-top: 19px;
    margin-bottom: 17px;
}

#footer {
    position: fixed;
    bottom: 0;
    background-color: #230f65;
    width: 85%;
}

#nome {
    color: #ffffff;
    float: left;
    padding-left: 30px;
    padding-top: 5px;
    font-family: sans-serif, Verdana;
}

#email {
    float: right;
    padding-top: 3px;
    padding-right: 10px;
    font-family: sans-serif, Verdana;
    color: #ffffff;
}

a:hover {
    font-weight: bold;
}

p > img {
    border-radius: 100%;
}

#imagem {
    padding-top: 5px;
    padding-left: 140px;
}

#boss {
    padding-top: 33px;
    float: left;
    padding-left: 15px;
}

#texto {
    padding-left: 255px;
}

Answer 1

你需要为你的页脚设置一个height，因为它（还）没有内容，因此没有高度。

#footer {
    position: fixed;
    bottom: 0;
    background-color: #230f65;
    width: 85%;
    height: 100px;
}

如果您希望页脚粘在底部，请查看http://cssstickyfooter.com

此外，为了使页脚居中，在这种情况下使用left: 7.5%;，它在页脚的两侧有剩余的空间。（100％ - 85％等于15％，左边一半，右边一半）

如何放置我的页脚？

1 个答案: