小贝子编程

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



我是新手。我不确定我做错了什么。我已经尝试了绝对和相对位置，但我无法将页脚放在页面底部。我也不想要固定选项。谁能说出它有什么问题？

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

将所有内容相对放置，除非你真的需要使用绝对值。请参阅使用代码的工作片段。

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

如果你只想把div 放在屏幕的底部，然后把它添加到你的 css 中：

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

当您滚动时，页脚也会移动。如果您希望它停留在同一位置，请制作position: fixed

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

并给主父div position: relative并申请 

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

这将起作用。

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

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium