将按钮放在div或屏幕底部

Question

我想把按钮放在一个div或屏幕底部（但不是固定位置）。我的代码结构如下：

1. div-1
   2. div-2
      3. div-3
         4. button

我想把按钮放在div 1的底部，该div的高度使用jQuery设置（该高度为屏幕的高度，因此将按钮放在屏幕底部也可以解决问题）。

我尝试过以下方法：

CSS

.button {
    position: fixed;
    bottom: 10px;
    left: 50%;
    margin-left: -104.5px; /*104.5px is half of the button's width*/
}

这会将按钮置于屏幕底部且居中（这正是我想要的），但是其位置是固定的，所以如果我向下滚动，按钮也会向下移动。 我曾尝试将按钮的position设置为absolute，并将div-1的position设置为relative，但这个方法也不起作用。 编辑： div的高度是可变的，因此边距可能不是一个好的选择。

- user6038967

---

当div2和div3比div1小且顶部对齐时，您不能将按钮放在div1的底部。是的，请分享一些代码。这将有助于我们更好地理解问题。 如果您只是想要将按钮放在屏幕底部，则可以通过css实现，而无需将它们放在div内（但如果您愿意，也可以这样做）。 - ravish.hacker

Answer 1

只需将按钮的position属性设置为absolute，而不必将其所在的div元素设置为relative。

.button {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -104.5px; /*104.5px is half of the button's width*/
}
.test{
  height:1000px;
  
}

<div class="test">
 <div>
    <div>
      <button class="button">
            test
      </button>
    </div>
  </div>
</div>

- CodeWeis

---

这对我起作用了，不确定为什么，但还是谢谢！ - user6038967

这是因为如果你将div设置为相对定位，那么按钮将在div中绝对定位，这是因为你嵌套了div。 - CodeWeis

Answer 2

if width div 50% then left must 25% if width div 70% then left must 15%

.center{
  position:fixed;
  bottom:20px;
  left:20%;
  width:60%;
 
}

 .center .btn{
     background:red;
     width:100%;
     color:white;
     font-weight:bold;
     border-radius: 64px;
    padding:10px;
  }

<div class="center">
  <button class="btn">Login</button>
</div>

- Revi Ana

Answer 3

尝试使用VW替代像素(px)。

HTML:

<button class="button">TEST</button>

CSS：

.button {
    position: fixed;
    bottom: 10px;
    left: 47vw;
    width: 6vw;
}

EDIT:

HTML:

<div class="div">
<button class="button">TEST</button>
</div>

CSS：

.div{
   position: relative;
   border: 1px solid black;
   width: 500px;
   height: 250px;
}
.button {
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 50px;
    margin-left: -25px;
}

我一直在看代码而忘记了真正的问题是如何将按钮添加到 div 或屏幕底部。

父级 div 必须设置为 position: relative;，而按钮则需要设置为 position: absolute;

- edisonmecaj

---

他不想要修复。 - l0w_skilled

父级div必须是position: relative;，而按钮则是position: absolute; 这行代码救了我。 - Cheetah

Answer 4

我相信这些Stack Overflow的帖子可能对你有所帮助：

1) 如何使一个div浮动到其容器的底部 2) HTML/CSS定位浮动至底部 如果这些不能帮助你，请提供你的HTML代码。

- Johnny

---

我觉得HTML代码不会有太大帮助，因为它只是一些嵌套的div标签，里面放着Lorem Ipsum文本。不过，我会看一下你发的链接。 - user6038967

好的，我只是想再确认一下。 - Johnny

给出的两个答案基本上是一样的。不幸的是，我已经尝试过这些方法了（正如我在问题的最后一段文字中所述）。 - user6038967

Answer 5

这里是响应式宽度：

position: absolute;
bottom: 23px;
left: 10%;
width: 80%;

- Parth Developer

Answer 6

当父元素的高度和宽度为文档或页面的100％时，您应该在按钮上使用position: absolute。

<div class="div-1">
  <div class="div-2">
    <div class="div-3">
      <button>
      Just a button
      </button>
    </div>
  </div>
</div>

并使用少量重置的CSS：

* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

.div-1 {
  position: relative;
  height: 100%;
  width: 100%;
}

.div-2, .div-3{
  width: inherit;
  height: inherit;
}

button {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

这里是JSfiddle

- oboshto

---

它会将按钮居中，但并不会将其放置在 div/屏幕的底部。如果按钮的位置是固定的，则出于某种原因它会起作用... - user6038967