CODEWITHSUNDEEP
htmlcssweb
hjskeqwe
hjskeqwe

Reputation: 175

CSS how to define the distance of a div from the bottom of a page, not the bottom of the window?

I have a page that does not fit inside the browser window so the user has to scroll to the bottom. I want to make a div that is 50vh from the bottom, but if I do this:

    .test{ 
       position: absolute;
       bottom: 50vh;
    }

Then it just makes it so that when the page loads it is 50vh from the bottom of the window, not 50vh from the bottom of the entire page, which extends past the window. How would I make a div that is 50vh from the bottom of the entire page? Thanks.

Upvotes: 1

Views: 1176

Answers (1)

disinfor
disinfor

Reputation: 11533

You can set the body to have position relative. As long as the test element is a direct child it should work.

Here's the code to test:

body {
  position: relative;
}

.pusher {
  height: 1000px;
  background: red;
}

.test {
  height: 50px;
  background-color: green;
  bottom: 50vh;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
}
<div class="test">

</div>

<div class="pusher">
  
</div>

And here's a link to the fiddle to play with it: https://jsfiddle.net/v0kt9hnj/4/

Upvotes: 2

Related Questions