how to set a div in bottom of page

Question

I really don't know how to set a div in bottom of page.

my code is like this:

<footer>
  <div>
    <a href="https://stackoverflow.com/users/14248176/achyuta-pataki"><img src="https://via.placeholder.com/140x100" height="40px" width="40px"></a>
    &nbsp;
    <a href="https://github.com/achyutap"><img src="https://via.placeholder.com/140x100" height="40px" width="40px"></a>
    &nbsp;
    <a href="mailto:amp@gmail.com"><img src="https://via.placeholder.com/140x100" height="40px" width="40px"></a>
  </div>
</footer>

I have tried for <footer>.

hope it will help you [check it here](https://stackoverflow.com/questions/8824831/make-div-stay-at-bottom-of-pages-content-all-the-time-even-when-there-are-scrol) — thahseen, Sep 22 '20 at 15:09
You'll need to use CSS. There are a number of questions about this on the site. Please research and try some things out. — Heretic Monkey, Sep 22 '20 at 15:09
Does this answer your question? [Make div stay at bottom of page's content all the time even when there are scrollbars](https://stackoverflow.com/questions/8824831/make-div-stay-at-bottom-of-pages-content-all-the-time-even-when-there-are-scrol) — Atilla Arda Açıkgöz, Sep 22 '20 at 15:10

Rayees AC · Accepted Answer · 2020-09-22T15:23:09.240

use fixed footer

footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align:center;
  margin:0 auto;
}

<footer>
  <div>
    <a href="https://stackoverflow.com/users/14248176/achyuta-pataki"><img src="https://image.flaticon.com/icons/png/128/2111/2111628.png" height="40px" width="40px"></a>
    &nbsp;
    <a href="https://github.com/achyutap"><img src="https://image.flaticon.com/icons/png/128/2111/2111432.png" height="40px" width="40px"></a>
    &nbsp;
    <a href="mailto:amp@gmail.com"><img src="https://image.flaticon.com/icons/png/128/732/732200.png" height="40px" width="40px"></a>
  </div>
</footer>

score 3 · Answer 2 · answered Sep 22 '20 at 15:18

Add the below CSS to your div or footer:

position: absolute;
bottom: 0;

Simply using HTML element "footer" doesn't mean that the div would be at the end of the page. It is just a HTML tag which is used for semantics, and has nothing to do how the element would be visible, i.e., it doesn't apply any specific CSS.

score 1 · Answer 3 · edited Sep 22 '20 at 15:19

You haven't added any CSS. you can set an element to the footer by adding position

footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<body>
    <footer >
        <div>
        <a href="https://stackoverflow.com/users/14248176/achyuta-pataki"><img src="https://via.placeholder.com/140x100" height="40px"
            width="40px"></a>
        &nbsp;
        <a href="https://github.com/achyutap"><img src="https://via.placeholder.com/140x100" height="40px" width="40px"></a>
        &nbsp;
        <a href="mailto:amp@gmail.com"><img src="https://via.placeholder.com/140x100" height="40px" width="40px"></a>
    </div>
    </footer>  
</body>
</html>

score 1 · Answer 4 · answered Sep 22 '20 at 15:11

you need some css for this:

  <!--this will do-->
  <body style="display: grid;
        align-content: end;
        height: 100vh;
        margin: 0;">
    <footer>
      <div>
       <a href="https://stackoverflow.com/users/14248176/achyuta-pataki">
        <img src="stack.png" height="40px" width="40px">
       </a>
       &nbsp;
       <a href="https://github.com/achyutap"><img src="github.png" 
         height="40px" 
         width="40px"></a>
        &nbsp;
       <a href="mailto:achyutapataki@gmail.com"><img src="email.png" 
        height="40px" width="40px"></a>
       </div>
     </footer>
 </body>

how to set a div in bottom of page

4 Answers4