Place the button at the bottom of the div or screen

Question

I want to put my button at the bottom of a div or the bottom of the screen (but in a non-fixed position). My code structure is as follows:

• Div-1
  2. Div-2
     3. Div-3
        4. Button

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

What I have tried so far:

CSS

.button {
    position: fixed;
    bottom: 10px;
    left: 50%;
    margin-left: -104.5px; /*104.5px is half of the button 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 also goes down. I also tried setting the button positionto absoluteand div-1 positionto relative, this didn't work either.

: div , .

Answer 1

: , div relativ

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

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

Hide result

Answer 2

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;

Answer 3

, :

1) div

2) HTML/CSS

, HTML-.

Answer 4

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

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

and css with a little reset:

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