问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

我希望此页面的页脚贴在所有内容下方的底部，但不固定在屏幕中。问题是当身体的高度超过 100% 时，页脚停留在屏幕的中间，而不是在底部。

我已经看过很多关于如何实现这一点的教程，使用“位置：绝对”+“底部：0”之类的东西，但一切都失败了。

一探究竟：

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

</html>

CSS：

 body {
  font-family: 'Arvo', serif;
  height: 100%;
  margin: 0;
  padding: 0;
}

#wrapper {
  min-height: 100%;
}

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

#body {
  padding: 10px;
  padding-top: 8%;
  padding-bottom: 15%; /* Height of the footer */
}

footer {
  position: absolute;
  width: 100%;
  height: 15%;
  right: 0;
  bottom: 0;
  left: 0;
  color: #FFD740;
  background-color: #424242;
  clear: both;
}

链接到结果的打印屏幕：

链接到结果的打印屏幕

原文由 Matheus Navarro Nienow 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcss
阅读 604
2 个回答
得票最新
社区维基
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 来玩玩。

原文由 divy3993 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

接受的答案可能有点过时，因为我们现在有了 Flexbox。给容器 a min-height: 100vh 和页脚 a 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>

原文由 Kees Hak 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题