将 div 对齐到容器的底部

Question

I am using the skeleton CSS and I'm trying to get a div to be at the bottom of the page. I have tried using position: absolute; bottom: 0; position: absolute; bottom: 0; within the container has a relative position, but the div just aligns to the right-hand side of the page.

 .page { align-items: center; background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; min-height: 100vh; } #home { background: red; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css"> <div class="page" id="home"> <div class="container" style="text-align: center;"> <div class="row"> I am a title in the middle of the page. </div> <div class="row" style=""> I want to be at the bottom of the page. <br> <a href="#">Click here!</a> </div> </div> </div>

Is this possible, please?

Answer 1

Take the Bottom text element out of the CONTAINER parent and place it as a child of the PAGE element, then position:absolute will work:

https://jsfiddle.net/akLr6zb0/

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">

<div class="page" id="home">
  <div class="container" style="text-align: center;">
    <div class="row">
      I am a title in the middle of the page.
    </div>
  </div>
  <div class="bottom" style="">
    I want to be at the bottom of the page.
    <br>
    <a href="#">Click here!</a>
  </div>  
</div>

.page {
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;  
  justify-content: center;
  min-height: 100vh;
  position: relative;
}

#home {
  background: red;
}

.bottom {
  bottom: 0;
  display: block;
  position: absolute;
}

Answer 2

position: absolute; bottom: 0; is right, but you also need to make sure the direct parent .container is the height of the page, and then center everything with display: flex :

 .page { min-height: 100vh; }.container { display: flex; justify-content: center; align-items: center; height: 100vh; } #home { background: red; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css"> <div class="page" id="home"> <div class="container" style="text-align: center;"> <div class="row"> I am a title in the middle of the page. </div> <div class="row" style="position: absolute; bottom: 0;"> I want to be at the bottom of the page. <br> <a href="#">Click here!</a> </div> </div> </div>

Answer 3

I am not sure if it's what you want but I achieve that with displaying the container as flex.

 .page { align-items: center; background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; min-height: 100vh; } #home { background: red; }.container { flex-grow: 1; display: flex; align-items: center; justify-content: center; }.bottom { position: absolute; bottom: 0; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css"> <div class="page" id="home"> <div class="container"> <div class="row"> I am a title in the middle of the page. </div> <div class="row bottom" style=""> I want to be at the bottom of the page. <br> <a href="#">Click here!</a> </div> </div> </div>