Question

我正在学习网络开发，而我无法弄清楚我在这方面做错了什么。我希望此页面的页脚粘贴到所有内容下方的底部，但不会在屏幕中固定。问题是当身体高度超过100％时，页脚会停留在屏幕中间，而不是在底部。

我已经看过很多关于如何实现这一目标的教程，使用＆＃34; position：absolute＆＃34; +＆＃34;底部：0＆＃34;和东西，但一切都失败了。

检查出来：

<div class="button">
  <div class="button-text">
    Very long button text
  </div>
</div>

CSS：

<html>
<head>
    <meta charset="iso-8859-1" />               
    <link rel="stylesheet" type="text/css" href="index.css" />
    <link href='https://fonts.googleapis.com/css?family=Arvo|Open+Sans|Ubuntu+Roboto' rel='stylesheet' type='text/css'>
    <title>Matheus's Page</title>
</head>
<body>
    <div id="wrapper">
        <header>
            <div class="title-div">
                <h1>Title</h1>
            </div>

            <nav>
                <ul>
                    <li><h3>Home</h3></li>
                    <li><h3>Articles</h3></li>
                    <li><h3>Perfil</h3></li>
                    <li><h3>Settings</h3></li>
                </ul>
            </nav>
        </header>
        <div id="body">
            <p>Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste </p>
        </div>
        <footer>
            <p>Footer</p>
        </footer>
    <div>
</body>

link to printscreen of the result

这是我的第一个网页，我再一次在网上搜索并找到了很多解决方案，但无法设法完成任何工作。另外，对不起我的英语，它不是我的母语。

Answer 1

我认为这可能会对你有帮助。

向您展示如何实现您想要的目标。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#wrapper {
  min-height: 100%;
  position: relative;
}
#header {
  background: #ededed;
  padding: 10px;
}
#content {
  padding-bottom: 100px;
  /* Height of the footer element */
}
#footer {
  background: #ffab62;
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
}

<div id="wrapper">

  <div id="header">
  </div>
  <!-- #header -->

  <div id="content">
  </div>
  <!-- #content -->

  <div id="footer">
  </div>
  <!-- #footer -->

</div>
<!-- #wrapper -->

确保#content上'padding-bottom'的值等于或大于#footer的高度。

<强>更新

JSFiddle Demo来玩。

Answer 2

我正在使用Bootstrap 4，它对我有用：https://www.youtube.com/watch?v=yc2olxLgKLk

我在CSS文件（base.css）中这样做：

    html {
        height: 100%;
    }

    body {
        min-height: 100%;

        display: flex;
        flex-direction: column;
    }

    footer{
        padding: 3em;
        margin-top: auto;
    }

并且我已经在html（base.html）中链接了CSS文件：

<head>
    <link rel="stylesheet" type="text/css" href="'<path to css>'"/>
</head>

Answer 3

你可以尝试这种造型;

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    margin-bottom: -100px;
    padding-bottom: 100px;
}
header {
    position: absolute;
    float: top;
    width: 100%;
    height: 8%;
    background-color: #424242;
    color: #FFD740;
}
.title-div {
    position: absolute;
    height: 100%;
    margin: auto 5%;
    padding-right: 3%;
    border-right: solid 2px #FFD740;
}

header nav {
    position: absolute;
    width: 75%;
    left: 15%;
}

header ul {
    list-style: none outside none;
}

header ul  li{
    display: inline-block;
    margin: auto 2% auto 0; 
}
footer {
    height: 100px;
    padding-top: 15px;
    padding-left: 15px;
    color: #FFD740; 
    background-color: #424242;
}

Here 是演示

Answer 4

@ divy3993发布的答案有效，但有时将页脚设为绝对值会使它滞留在页面中间。这就是我所经历的。所以我做了一个小的更改，我将其发布在下面

#footer {
  background: #ffab62;
  width: 100%;
  height: 100px;
  position: relative; //make relative instead of absolute
  bottom: 0;
  left: 0;
}

Answer 5

这对我有用：当我尝试底部0和右边0时，页脚下方有一些令人讨厌的底部边距，但不会消失。我将其固定为top：100％和绝对位置：

body{
height: 100%;
width: 100%;
position: relative;

}

footer{
background-image: linear-gradient(to right, #c10f3f, #010168);
padding: 1em;
width: 100%;
top: 100%;
position: absolute;
}

Answer 6

由于我们现在有了Flexbox，因此可接受的答案可能有些过时。给容器一个min-height: 100vh和一个页脚一个margin-top: auto，您就不必处理绝对的位置和固定的高度。

body {
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header {
    background-color: #FFCCCC;
}

.content {
    background-color: #CCFFCC;
}

.footer {
  background-color: #CCCCFF;
  margin-top: auto;
}

<div class="container">
    <div class="header">header</div>
    <div class="content">content</div>
    <div class="footer">footer</div>
</div>

Answer 7

试试这个：

CSS：

#footer
{
    position: relative;
    background-size: cover;
    background-position: 50% 50%;
    background-color: #ffab62;
}

html：

<doctype HTML>
<HTML>
<head>
</head>
<body>
<div id = footer></div>
</body>
</HTML>

Answer 8

我正在使用 bootstrap 4 和 mdboostrap，我遇到了同样的问题。

内联样式对我有用：

<footer class="page-footer lighten-5" 
        style="position: relative; bottom:0; width: 100% !important;" >

....

</footer>

Answer 9

你的第一个错误就是在你不需要的许多东西上使用绝对位置和最小高度。

对于初学者只需删除所有绝对的东西，并将min-height仅放在名为“body”的div中，之后默认情况下该页脚将粘贴到#body，之后你的页脚将不会飞到任何想要的地方。

在div中使用绝对值的最佳方法是： - 当你已经拥有相对位置的div时，然后你将另一个div放在一个具有相对位置的div内的绝对位置。

此外，如果您开始使用％，则只使用像素值，您将会像现在一样迷失。

Answer 10

position: fixed

使用它可以将 position 设置为 Fixed。

即使滚动，如何将页脚粘到底部（不固定）

10 个答案: