0

I want to position this red div element onto the bottom of a page, so I used this code:

div {
  background-color: red;
  width: 100px;
  height: 100px;
  position: relative;
  top: 100vh;
}
<!DOCTYPE html>
<html lang="en">

    <head>
        <link rel="stylesheet" href="master.css">
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS</title>
    </head>
    <body>
        <div></div>
    </body>


</html>

Unfortunately, this positions the element onto the bottom of the page based on the top of the element, which makes you have to scroll down.

What is happening

What I want

Can anybody help me get the desired result? Thank you.

Wynder
  • 93
  • 8
  • your snippet doesn't do what you say "What is happening", what is that blue area? another div ? the body ? – dippas Jul 11 '22 at 23:41

1 Answers1

1

You have a few issues here. top will align the item starting at a certain distance from the top. So you will need bottom: 0 to align the element at the bottom but inside the element. The next issue is, that body without content will have a height of 0. As such you need to apply a min-height: 100vh to the body to fill out the entire viewport.

If you want the element to be always placed at the bottom of the viewport, use position: fixed; bottom: 0;

body {
  margin: 0;
  min-height: 100vh;
}

div {
  background-color: red;
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 0;
}
<!DOCTYPE html>
<html lang="en">

    <head>
        <link rel="stylesheet" href="master.css">
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS</title>
    </head>
    <body>
        <div></div>
    </body>


</html>
tacoshy
  • 10,642
  • 5
  • 17
  • 34