Question

我正在创建一个包含不同部分的网站，一个位于屏幕底部。我首先尝试将div元素放在页脚元素内。这没用。 div仍位于屏幕顶部。我没有主意，所以我在Google上寻找解决方案。我没有尝试过。我该怎么办？

Answer 1

如果您希望它始终位于屏幕底部（即，触摸显示器底部），则可以使用

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

只需确保它不在position: relative声明的任何内容之内，否则它将卡在该元素的底部。

如果希望它位于包装元素的底部，请使用

.myWrapperClass{
    position: absolute;
}

并将.myElementClass元素放在.myWrapperClass元素内

Answer 2

如果您希望始终在屏幕上显示页脚或在页面末尾像这样显示页脚，这就是答案。解释与zachThePerson's相同。

.main {
    position: relative;
    height: 700px;
    width: 100%;
    background: blue;
}

.box {
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.box1 {
    width: 100px;
    height: 100px;
    background: red;
    float: right;
}

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>
    <div class="main">
      <h1>The float Property</h1>
      <p>In this example, the image will float to the right in the text.</p>

      <div class="box">
         <div class="box1"></div>
      </div>

    </div>
  </body>
</html>

Answer 3

您可以使用Flexbox，下面的解决方案可能会有用。

您可以将页面的主要内容放在类main-content的div中，并使用下面的Flexbox设置，将始终将页脚推到底部。

HTML：

<body>
  <div class="flexbox-container">
    <div class="main-content">Just a random div with some content</div>
    <div class="footer">Div to be on the bottom of the page</div>
  </div>
</body>

CSS：

.flexbox-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

但是，上面的代码不会更改flexbox-container div的高度。因此，您可能需要添加以下内容：

.flexbox-container {
  ...
  height: 100vh;
}

A Complete Guide to Flexbox 是一个很好的页面，其中说明了所使用的Flexbox。

如何使用CSS将div元素浮动到屏幕底部？

3 个答案: