Html 将按钮放在 div 或屏幕底部

Place button on bottom of div or screen

提问by CodeWeis

I want to position my button on the bottom of a div or the bottom of the screen (but in a non-fixed position). My code structure looks like this:

我想将我的按钮放在 div 的底部或屏幕的底部（但处于非固定位置）。我的代码结构如下所示：

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

1. div-1
   2. div-2
      3. div-3
         4. 按钮

I want to put the button at the bottom of div 1, which height is set using jQuery (The height is the height of the screen, so putting the button at the bottom of the screen may also be a solution)

我想把按钮放在div 1的底部，高度是用jQuery设置的（高度就是屏幕的高度，所以把按钮放在屏幕底部也可能是一个解决方案）

What I've tried so far:

到目前为止我尝试过的：

CSS

CSS

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

This centers the button (what I want) and it places it at the bottom of the screen, but the position is fixed, so if I scroll down the button goes down aswell. I've also tried setting the button's positionto absoluteand div-1's positionto relative, this didn't work either.

这使按钮居中（我想要的）并将其放置在屏幕底部，但位置是固定的，所以如果我向下滚动按钮也会向下滚动。我也试过将按钮设置position为absolute和 div-1 设置position为relative，这也不起作用。

Edit:The div's height is variable, so margins may not be such a good option

编辑：div 的高度是可变的，所以边距可能不是一个好的选择

回答by CodeWeis

just do the button position:absolute without putting the div relativ

只需执行按钮位置：绝对而不放置 div relativ

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

回答by Revi Ana

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

如果宽度 div 50% 那么左必须是 25% 如果宽度 div 70% 那么左必须是 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>

回答by djsony90

Try using VW instead of px.

尝试使用 VW 而不是 px。

HTML:

HTML：

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

CSS:

CSS：

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

EDIT:

编辑：

HTML:

HTML：

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

CSS:

CSS：

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

I was looking the code instead of the question so i forget that the real question was add the button on the bottom of divor screen.

我正在查看代码而不是问题，所以我忘记了真正的问题是在div或屏幕底部添加按钮。

The parent div has to be position: relative;and the button position: absolute;

父 div 必须是position:relative; 和按钮位置：绝对；

回答by Johnny

I believe these Stack Overflow posts might be of help to you:

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

1) How do I get a div to float to the bottom of its container

1)如何让 div 浮动到其容器的底部

2) HTML/CSS positioning float bottom

2) HTML/CSS 定位浮动底部

If this doesn't help can you please also provide your HTML code.

如果这没有帮助，您还可以提供您的 HTML 代码。

回答by oboshto

You should use position: absolute on your button when parent element height and width is 100% (of document or page).

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

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

and css with little reset:

和 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%);
}

Here is JSfiddle

这是JSfiddle