stretch div over whole page in html/css-CodePudding

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

CodePudding user response：

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

position: fixed;
bottom: 0;

CodePudding user response：

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 ><a href=#>Click me</a>
</div>