Javascript 如何根据页面上的内容定位按钮

我在css页面上定位按钮时遇到问题。我希望按钮固定在某个位置，但当页面上有很多内容时，我希望按钮向下移动

首先，当没有太多内容时，我希望在页面底部使用按钮，例如下面的代码，这样做：

#Button
{
  position: fixed;
  height:90px;
  width:220px;
  left:16%;
  top:70%;
  border:none;
  background:none;
}

然后，当有大量内容时，我希望按钮向下移动，如下面的代码：

#Button
{
  position: absolute;
  height:90px;
  width:220px;
  left:16%;
  padding-top:10%;
  padding-bottom: 13%;
  border:none;
  background:none;
}

---

有人能帮忙吗？我在网上看过，但看不懂

使用位置：相对于您在此按钮之前定义的元素。

使用位置：相对于您在此按钮之前定义的元素。

如果您在所有内容周围定义包装块元素a，并将其直接放在该元素下，仅使用CSS就可以达到所需的结果

HTML:

---

但是，我必须警告您，传统浏览器不支持vh单元，而其他一些浏览器显示出错误行为。在您的项目中实现它之前，请先看一看。

如果您在所有内容周围定义一个包装块元素a，并将其直接放在该元素下，则仅使用CSS就可以达到所需的结果

HTML:

---

但是，我必须警告您，传统浏览器不支持vh单元，而其他一些浏览器显示出错误行为。在您的项目中实施它之前，请先看一看。

我不知道您的结构，但我会尽力帮助您

让我们使用以下标记：

<div class="parent">
    <p class="texto">Your text goes here!</p>
    <input type="button" value="OK" />
</div>

这样，如果没有太多内容，按钮将始终处于相同的位置。如果有很多内容，它将跟随高度

片段：

.家长{ 宽度：200px； 填充物：5px； 边框：1px纯黑； 浮动：左； 保证金：5px； } .parent.texto{ 最小高度：100px； }

小文本！

Lorem ipsum dolor sit amet，是一位杰出的献身者。Morbi mi urna，rhoncus vitae hendrerit，hendrerit，turpis。这是奥古斯，这是一辆汽车。lobortis Vivamus，velit vitae maximus porttitor，erat nulla scelerisque est，nec 矢状体直径直径。名言名言。发酵舌苔，排卵期，前庭同侧。杜瓦是非圣徒。我是爱神，我是爱神，我是帝王。毛里斯·波苏尔·康瓦利斯·乌兰科珀。

---

我不知道你的结构，但我会尽力帮助你

让我们使用以下标记：

<div class="parent">
    <p class="texto">Your text goes here!</p>
    <input type="button" value="OK" />
</div>

这样，如果没有太多内容，按钮将始终处于相同的位置。如果有很多内容，它将跟随高度

片段：

.家长{ 宽度：200px； 填充物：5px； 边框：1px纯黑； 浮动：左； 保证金：5px； } .parent.texto{ 最小高度：100px； }

小文本！

Lorem ipsum dolor sit amet，是一位杰出的献身者。Morbi mi urna，rhoncus vitae hendrerit，hendrerit，turpis。这是奥古斯，这是一辆汽车。lobortis Vivamus，velit vitae maximus porttitor，erat nulla scelerisque est，nec 矢状体直径直径。名言名言。发酵舌苔，排卵期，前庭同侧。杜瓦是非圣徒。我是爱神，我是爱神，我是帝王。毛里斯·波苏尔·康瓦利斯·乌兰科珀。

---

定义大量内容。这可能是无法回答的；这在很大程度上取决于页面其余部分的布局。也就是说，基于内容流定位元素的最佳解决方案通常是不使用位置覆盖内容流：绝对或固定。定义大量内容。这可能是无法回答的；这在很大程度上取决于页面其余部分的布局。也就是说，基于内容流定位元素的最佳解决方案通常是不使用位置覆盖内容流：绝对或固定。这不会在没有内容时将按钮放在页面底部。然后，这只适用于Javascript。当没有内容时，这不会将按钮放在页面底部。然后，这只适用于Javascript。

<div class="parent">
    <p class="texto">Your text goes here!</p>
    <input type="button" value="OK" />
</div>

.parent .texto {
  min-height: 100px;
}