position:absolute for footer not working as expecting

Question

I have googled it but couldn't find any working solution; As a below example the position:absolute does not set the footer at the bottom of page

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

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <div class="footer">
    <p>Footer</p>
  </div>

</body>

</html>

If I scroll it, I will get:

I want the footer get pinned at the bottom of the page, who can I do this?

@Maharkus no I don't want a fixed footer I just want it to get pinned down at the bottom — dariush, Jul 17 '18 at 15:16
Like at the bottom of all the text? Why do you use `position: absolute` at all then? — Maharkus, Jul 17 '18 at 15:18
@j08691 then If my page has less content than page's height then it will not be at the bottom of the page! — dariush, Jul 17 '18 at 15:19
And we should know you want that how? You didn't specify the behavior you wanted from your footer in your question. — j08691, Jul 17 '18 at 15:20

score 0 · Answer 1 · answered Jul 17 '18 at 15:17

Use position: fixed instead of position: absolute, please check working example below based on your code.

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>

  <div class="footer">
    <p>Footer</p>
  </div>

</body>

</html>

position:absolute for footer not working as expecting

1 Answers1