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

Question

我在使用 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;
}

有人可以帮忙吗？我在网上看过，但无法理解。

Answer 1

对您在此按钮之前定义的元素使用 position:relative。

Answer 2

如果您在所有内容周围定义一个包装块元素（例如 <div>）并将 <button> 直接放在该元素下方，则可以使用 [= 达到所需的结果30=] 而已。

HTML:

<div id="wrapper">
    <!-- other content goes here -->
    <button id="button">Sample</button>
</div>

CSS:

#wrapper {
    position: relative;
    min-height: 100vh;
}

#button {
    position: absolute;
    bottom: 0;
}

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

Answer 3

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

让我们使用以下标记：

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

为了解决您的问题，我会在内容中使用 min-height。

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

这样，在内容不多的情况下，按钮会一直在同一个位置。内容多的话会跟随高度。

片段：

.parent {
  width: 200px;
  padding: 5px;
  border: 1px solid black;
  float: left;
  margin: 5px;
}
.parent .texto {
  min-height: 100px;
}

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

<div class="parent">
  <p class="texto">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi urna, rhoncus vitae hendrerit ut, hendrerit a turpis. Phasellus sed rhoncus augue, eget vehicula neque. Vivamus lobortis, velit vitae maximus porttitor, erat nulla scelerisque est, nec
    sagittis diam diam id nisl. Maecenas dictum lacinia dignissim. Duis eget ligula fermentum, vulputate dui sed, vestibulum ipsum. Duis non consectetur dolor. Nunc urna eros, tincidunt id nisl id, dapibus imperdiet orci. Mauris posuere convallis ullamcorper.
  </p>
  <input type="button" value="OK" />
</div>

希望对您有所帮助！

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

How to position button depending on what content is on the page

html

javascript

css

css-position

button