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代码。我不确定页脚是否应该是一个类，或者它可以只是一个标记。

* {
    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提供给主父div并应用

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

这将有效。

Answer 3

删除位置：相对; #main id css。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

将所有相关内容定位，除非您确实需要使用绝对值。请参阅使用您的代码的工作代码段。

＆＃13;

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

＆＃13;

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

＆＃13;

我无法让我的页脚留在底部

4 个答案: