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

如果您围绕所有内容定义了包装块元素（例如<div>）并将<button>直接放在该元素下，则可以仅使用CSS达到所需的结果。< / p>

<强> 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 2

我不了解你的结构，但我会尽力帮助你。

让我们使用以下标记：

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

要解决您的问题，我只需在内容中使用min-height。

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

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

段：

＆＃13;

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

＆＃13;

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

＆＃13;

希望它有所帮助！

Answer 3

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

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

3 个答案: