时间戳

首页 > 解决方案 > 如何使用 CSS 将 div 元素浮动到屏幕底部？

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

问题描述

我正在制作一个包含不同部分的网站，一个位于屏幕底部。我首先尝试将 div 元素放在页脚元素中。这没有用。div 仍然在屏幕的顶部。我没有想法，所以我在谷歌上搜索了一个解决方案。我试过的都没有用。我怎样才能做到这一点？

标签： htmlcss

解决方案

如果您需要始终在屏幕上看到您的页脚，或者在页面末尾像这样，这就是答案。解释与zachThePerson 的相同。

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

推荐阅读