我不能让我的页脚留在底部

Question

我是新手。我不确定我做错了什么。我已经尝试了绝对和相对位置，但我无法让页脚位于页面底部。我也不想要固定选项。谁能告诉我这是怎么回事？

<!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>

这是单独的 CSS 代码。我不确定页脚是否应该是 class 或者它可以只是一个标签。

* {
    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;
}

Answer 1

如果您只想将 div 放在屏幕的底部，然后将其添加到您的 css:

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

当您滚动时，页脚也会移动。如果你想让它留在同一个位置，那么 position: fixed

Answer 2

在您的 HTML 中，您正在关闭 </footer> 而不是关闭 </div>。

并给position: relative主要parentdiv并应用

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

这会起作用。

Answer 3

删除位置：相对； #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>

Answer 4

相对定位一切，除非你真的需要使用绝对定位。使用您的代码查看工作片段。

* {
    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>

我不能让我的页脚留在底部

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

html

css

footer