-2

I have a link and i want that it is always at the bottom of the page. I tryed display: flex and align-items: flex-end but the problem is the div isn't going till the bottom of the page. I could just do margin-top: 375px but I want that it is at the bottom at a phone and a computer can someone help?

sorry for my bad english

KaliboGHG
  • 15
  • 2
  • 1
    Can edit the question and add the code that you have tried so far. Refer this link for understanding [how to ask a question ](https://stackoverflow.com/help/how-to-ask) – JustAG33K Aug 16 '22 at 19:11
  • Welcome to Stack Overflow!, Please [take the tour](http://stackoverflow.com/tour), and read [how to ask](https://stackoverflow.com/help/how-to-ask), an [On Topic question](https://stackoverflow.com/help/on-topic), then look at the [Question Check list](https://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist), the [perfect question](http://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/) and how to create a [Minimal, Complete and Verifiable Example](http://stackoverflow.com/help/mcve) – disinfor Aug 16 '22 at 19:13
  • Please read https://stackoverflow.com/help/minimal-reproducible-example to help you put the code you have so far into your question. Any answer without seeing your HTML structure will just be a guess. – A Haworth Aug 16 '22 at 19:14
  • 1
    You can try `position: fixed` and `bottom: 0px` – H K Aug 16 '22 at 19:22

2 Answers2

0

I would try adding this to the element you want to stick to the bottom.

position: fixed;
bottom: 0;
MantisToboggan
  • 73
  • 4
0

This is what you're looking for:

Like others said, bottom: 0 and position: fixed is what you need.

width: 100% will stretch the div across the page.

When you add fixed to an element, it then becomes independent of all other elements, which makes it tricky to position. I added left: 50%; and transform: translate (-50%, 0); it helps center the element to the page.

Source: (Center aligning a fixed position div)

div.bottom-nav {
  background-color: #232323;
  width: 100%;
  height: 55px;
  line-height: 55px;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
a {
  color: white;
}
<div class="bottom-nav"><a href=#>Click me</a>
</div>
Crimp
  • 389
  • 1
  • 22