0

I have a <div> like below

<div style="right:0px;bottom:0px;position:absolute;">

</div>

When my mobile site is opened in portrait mode, this div is displayed correctly at the bottom right corner. But, when opened in landscape mode it is displayed at corner and overlaps the elements already present.

I want this div to be at the bottom of all elements at the bottom right corner of the page. How do I do it?

core114
  • 5,155
  • 16
  • 92
  • 189
Iron Man
  • 75
  • 10
  • Can you draw an illustration showing the current display of your div and how it should be? – Chanh Tran Jul 07 '17 at 10:27
  • this question is very vague and contradicting itself. Should it be accessible all the time (floating on top) or just when user scroll to bottom? Also what is correctly in your case? – Dejan.S Jul 07 '17 at 10:34
  • use `position:fixed` – Deepak Yadav Jul 07 '17 at 10:40
  • @DeepakYadav — How will that stop it overlapping? – Quentin Jul 07 '17 at 10:48
  • I *think* this is a duplicate of https://stackoverflow.com/questions/13348965/keeping-html-footer-at-the-bottom-of-the-window-if-page-is-short but the question isn't entirely clear. – Quentin Jul 07 '17 at 10:48

1 Answers1

0

I would suggest to use flexbox - but it could need to reorganise a little your css code

.page {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height:100vh;
}

.element {
  height: 10px;
  width: 80%;
  border: 1px solid #000;
  padding: 20px 0;
}

.element.bottom {
  margin-top: auto;
  background: red;
}
<div class="page">
  <div class="element">
  </div>
  <div class="element">
  </div>
  <div class="element">
  </div>
  <div class="element bottom">
  </div>
</div>
Kasia
  • 1,665
  • 1
  • 10
  • 16