显示一个 <div> 右下角无位置：绝对

Question

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?

Answer 1

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>