stackoom
  简体   繁体   中英

I can't get my footer to stay at the bottom

 原文  2017-11-02 14:39:37  1   4    html/ css/ footer

Question

I'm new at this. I'm not sure what I'm doing wrong. I've tried both the absolute and relative position but I can't get the footer to go at the bottom of the page. I also don't want the fixed option. Can anyone tell what's wrong with it? 

<!DOCTYPE html>
<html>

<head>
<title>after hours</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>

    <div id="banner">

        <div class="content">
            <h1>as always <br> at this hour </h1> 
            <h1 class="maroon">time means <br> nothing</h1>
        </div>

    </div>

    <div class="nav">
        <a href="home.html">home</a>
        <a href="about.html">about</a>
        <a href="blog.html">blog</a>
        <a href="portfolio.html">portfolio</a>
    </div>  

    <div id="main">

        <div class="about">
            <p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
        </div>

        <div class="content">
            <p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>

            <div class="rectangle">
                <p>This is a rectangle.</p>
            </div>
            <div class="rectangle">
                <p>This is a rectangle too.</p>
            </div>
            <div class="rectangle">
                <p>This a rectangle as well.</p>
            </div>
        </div>

    </div>

    <footer>
    <p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
    </footer> 

</body>

</html>

This is the separate CSS code. I'm not sure if the footer should be a class or it can simply be a tag. 

* {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

body {
    font-family: helvetica;
    line-height: 25px;
    font-size: 15px;
    letter-spacing: 0.5px;
}

#banner {
    background: url(imgs/1.jpg);
    background-size: cover;
    width: 100%;
    height: 660px;
    position: absolute;
}

#banner .content h1 {
    text-align: center;
    position: absolute;
    top: 54%;
    left: 42.6%;
    padding: 30 30 60 30;
    color: #d6d6d6;
    font-size: 30px;
    font-family: futura;
    letter-spacing: 4px;
    line-height: 30px;

    /*
    border: 1.5px solid white;
    width: 260px;
    height: 80px;
    */
}

#banner .content h1.maroon {
    padding-top: 70px;
    color: firebrick;
}

.nav { 
    position: relative;
    top: 660px;
    background-color: black;
    width: 100%;
    height: 60px;
    text-align: center;
    padding: 20px 0px;
    margin-bottom: 30px;
}

.nav a {
    position: relative;
    text-transform: uppercase;
    text-align: center;
    color: white;
    font-family: roboto;
    font-weight: normal;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 5px;
    padding: 22px 40px;
    display: inline;
}

.nav a:hover {
    color: firebrick;
}

#main {
    position: relative;
    margin: 0 auto;
    top: 670px;
    width: 80%;
    padding: 20px;
}

.about {
    float: right;
    width: 30%;
    padding: 10px;

}

.rectangle {
    padding: 30px;
    display: inline-block;
    text-align: center;
    width: 180px;
    height: 200px;
}

.content {
    float: left;
    width: 60%;
    padding: 10px;
}

footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    margin: 0 auto;
    height: 300px;
}

4 answers

solution1
 0  2017-11-02 14:53:41

If all you want to do is put the div at the botton of the screen then add this to your css: 

.footer{
    position: absolute;
    bottom: 0;
}

When you scroll the footer will also move though. If you want it to stay in the same location then make position: fixed

solution2
 0  2017-11-02 14:54:06

In your HTML you are closing </footer> instead of close </div> .

And give position: relative to the main parent div and apply 

 .footer {
     position: absolute;
     bottom: 0;
  }

this will work.

solution3
 0  2017-11-02 15:07:01

remove position: relative; #main id css. 

 * { margin: 0; padding: 0; } * { box-sizing: border-box; } body { font-family: helvetica; line-height: 25px; font-size: 15px; letter-spacing: 0.5px; } #banner { background: url(imgs/1.jpg); background-size: cover; width: 100%; height: 660px; } #banner .content h1 { text-align: center; position:relative; top: 54%; left: 42.6%; padding: 30 30 60 30; color: #d6d6d6; font-size: 30px; font-family: futura; letter-spacing: 4px; line-height: 30px; /* border: 1.5px solid white; width: 260px; height: 80px; */ } #banner .content h1.maroon { padding-top: 70px; color: firebrick; position:relative; } .nav { top: 660px; background-color: black; width: 100%; height: 60px; text-align: center; padding: 20px 0px; margin-bottom: 30px; } .nav a { position: relative; text-transform: uppercase; text-align: center; color: white; font-family: roboto; font-weight: normal; text-decoration: none; font-size: 13px; letter-spacing: 5px; padding: 22px 40px; display: inline; } .nav a:hover { color: firebrick; } #main { /* position: relative;*/ margin: 0 auto; top: 670px; width: 80%; padding: 20px; } .about { float: right; width: 30%; padding: 10px; } .rectangle { padding: 30px; display: inline-block; text-align: center; width: 180px; height: 200px; } .content { float: left; width: 60%; padding: 10px; } footer { /* position: absolute;*/ float: left; right: 0; bottom: 0; left: 0; width: 100%; padding: 30px; margin: 0 auto; height: 300px; } 
 <!DOCTYPE html> <html> <head> <title>after hours</title> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <div id="banner"> <div class="content"> <h1>as always <br> at this hour </h1> <h1 class="maroon">time means <br> nothing</h1> </div> </div> <div class="nav"> <a href="home.html">home</a> <a href="about.html">about</a> <a href="blog.html">blog</a> <a href="portfolio.html">portfolio</a> </div> <div id="main"> <div class="about"> <p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p> </div> <div class="content"> <p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p> <div class="rectangle"> <p>This is a rectangle.</p> </div> <div class="rectangle"> <p>This is a rectangle too.</p> </div> <div class="rectangle"> <p>This a rectangle as well.</p> </div> </div> </div> <footer> <p>this is footer part <br/>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p> </footer> </body> </html>

solution4
 0 ACCPTED  2017-11-02 15:24:19

Position everything relative, unless you really need to use absolute. See working snippet using your code. 

 * { margin: 0; padding: 0; } * { box-sizing: border-box; } body { font-family: helvetica; line-height: 25px; font-size: 15px; letter-spacing: 0.5px; position: relative; } #banner { background: url(imgs/1.jpg); background-size: cover; width: 100%; height: 660px; position: relative; } #banner .content h1 { text-align: center; position: absolute; top: 54%; left: 42.6%; padding: 30 30 60 30; color: #d6d6d6; font-size: 30px; font-family: futura; letter-spacing: 4px; line-height: 30px; } #banner .content h1.maroon { position: relative; padding-top: 70px; color: firebrick; } .nav { position: relative; background-color: black; width: 100%; height: 60px; text-align: center; padding: 20px 0px; margin-bottom: 30px; clear: both; } .nav a { position: relative; text-transform: uppercase; text-align: center; color: white; font-family: roboto; font-weight: normal; text-decoration: none; font-size: 13px; letter-spacing: 5px; padding: 22px 40px; display: inline; } .nav a:hover { color: firebrick; clear: both; } #main { position: relative; margin: 0 auto; width: 80%; padding: 20px; clear: both; } .about { float: right; width: 30%; padding: 10px; } .rectangle { padding: 30px; display: inline-block; text-align: center; width: 180px; height: 200px; } .content { width: 60%; padding: 10px; } footer { position: relative; width: 100%; padding: 30px; margin: 0 auto; height: 300px; border: 1px solid red; } 
 <!DOCTYPE html> <html> <head> <title>after hours</title> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <div id="banner"> <div class="content"> <h1>as always <br> at this hour </h1> <h1 class="maroon">time means <br> nothing</h1> </div> </div> <div class="nav"> <a href="home.html">home</a> <a href="about.html">about</a> <a href="blog.html">blog</a> <a href="portfolio.html">portfolio</a> </div> <div id="main"> <div class="about"> <p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p> </div> <div class="content"> <p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p> <div class="rectangle"> <p>This is a rectangle.</p> </div> <div class="rectangle"> <p>This is a rectangle too.</p> </div> <div class="rectangle"> <p>This a rectangle as well.</p> </div> </div> </div> <footer> <p>Footer text in here</p> </footer> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question I can't get the footer to stay on the bottom of the page. Is this a clearfix float? I can't get my footer to be at the bottom of the page My footer won't stay at the bottom Just can't make footer stay at the bottom Can't get my footer to stick to the bottom My footer doesn't stay at the bottom of my webpage Why can't I get my HTML element to stay at the bottom of the page? Footer doesn't stay on bottom my footer doesn't stay at the bottom of the site when I zoom out the site How do I make my footer stay at the bottom of my page?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM