Place button on bottom of div or screen

Question

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:

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

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)

What I've tried so far:

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 position to absolute and div-1's position to relative, this didn't work either.

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

Answer 1

just do the button position:absolute without putting the 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>

Answer 2

Try using VW instead of 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;
}

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

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

Answer 3

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>

Answer 4

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

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

2) HTML/CSS positioning float bottom

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

Answer 5

You should use position: absolute on your button when parent element height and width is 100% (of 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 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

Answer 6

Here is the responsive width:

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