如何将 div 放在页面底部，但如果页面溢出则移动它 [已解决]答案

【问题标题】：How to put a div at the bottom of the page, but move it if the page overflows [SOLVED]如何将 div 放在页面底部，但如果页面溢出则移动它 [已解决]
【发布时间】：2021-08-10 08:09:49
【问题描述】：

我正在制作一个 html 页面，默认情况下顶部有一些 div，一些空白区域，然后页面底部有另一个 div。我可以使用固定位置或绝对位置使 div 保持在底部。 'studentcontainer' div 的开头应该很薄，这意味着它们不会占用页面上的所有空间。我希望'buttoncontainer' div 留在页面底部，上面有一些空白空间，除非'studentcontainers' 被扩展，在这种情况下我希望'buttoncontainer' 被推下页面上面没有空格（除了我设置的小边距）

Without any positioning the bottom div, with the buttons, floats right underneath the other divs, which I do not want.

With position: absolute the div starts off in the right place (ignore the weird sizing)...

But then when the above divs are expanded, the buttoncontainer stays where it is and overlaps the other divs

解决方案：我所做的是创建另一个 div，它是页面上所有 div 的父级，除了 'buttoncontainer' 我给了这个容器 height: auto 并设置了一个足够大的最小高度来推动底部的按钮。

【问题讨论】：

请添加代码
@MihirK98 我现在已经添加了代码，但是当它运行时它似乎不能正常工作。希望无论如何它都会有所帮助。

标签： html css position

【解决方案1】：

好吧，先别用

position: fixed;

使用

position: absolute;

现在不要使用顶部和左侧。改为使用底部和左侧

bottom: 10px;
left: 0;

我认为这应该可行（当页面展开时，div 仍然会粘在底部）

如果这不是您想要的，那么获取其他 div 的高度并相应地设置您的 div 的位置

【讨论】：

这不起作用，因为 div 一直悬浮在屏幕底部，并且在页面溢出时不会向下移动

【解决方案2】：

如果您可以分享您的代码，我可以为您提供更好的帮助，但据我了解，您希望“取消”和“继续”按钮始终位于底部。所以我为你创建了一个样本。如果这是你想要的，请检查下面的片段。

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>

    /* Check these codes */
    html, body {
      margin: 0;
      height: 100%;
    }
    body {
      display: flex;
      flex-direction: column;
    }
    header,
    footer {
      flex: none;
      background-color: yellow;
      padding: 10px;
    }
    main {
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      flex: auto;
    }

    /* These are not related to your topic it's just for styling */
    .some-divs {
      padding: 20px;
      margin: 20px;
      background-color: lightgrey;
    }
    .btn-container {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-direction: row;
    }
    .btn {
      height: 40px;
      width: 100px;
      border-radius: 5px;
      border: 1px solid black;
      background-color: DodgerBlue;
      color: white;
      margin-left: 10px;
      margin-right: 10px;
    }
  </style>
  <title>Template</title>
</head>
<body>
  <header>
    This is header
  </header>
  <main>
    <p class="some-divs">Your div</p>
    <p class="some-divs">Your div</p>
    <p class="some-divs">Your div</p>
    <p class="some-divs">Your div</p>
    <p class="some-divs">Your div</p>
    <p class="some-divs">Your div</p>
    <p class="some-divs">Your div</p>
    <p class="some-divs">Your div</p>
    <p class="some-divs">Your div</p>
  </main>
  <footer>
    <div class="btn-container">
      <button class="btn" type="button" name="button">Cancel</button>
      <button class="btn" type="button" name="button">Continue</button>
    </div>
  </footer>
</body>
</html>

【讨论】：

感谢您的回复，这不是我想要做的。我一直在寻找一种默认情况下将按钮放在页面底部的方法，即使上面没有 div 将它们保留在那里。然后，如果页面溢出，我希望按下按钮。我找到了解决方案并将其添加到我的帖子中。
好的，现在我明白你的目的了。如果能解决问题就好了。