Problem persists with the fixed element at the bottom of my mobile device when I scroll. It seems that the height is recalculated each time due to an increase in document height on mobile devices.
The issue appears to be related to the address bar fading out, causing the document viewport to enlarge. Despite trying various solutions like setting height: 100% for both html and body, no success has been achieved.
A demonstration GIF illustrates scrolling on the page through a phone's chrome browser, highlighting the transparency of the address bar:
https://i.sstatic.net/Zthsg.gif
This is the code currently implemented:
#wrapper {
position: fixed;
background: darkcyan;
color: #fff;
bottom: 0;
left: 0;
right: 0;
top: calc(100% - 100px);
width: 100%;
}
#bottom-element {
height: 50px;
position: fixed;
background: black;
display: block;
bottom: 0;
width: 100%;
left: 0;
right: 0;
}
#title {
text-align: center;
padding: 15px;
height: 20px;
border-bottom: 1px solid white;
}
#entries {
display: flex;
flex-direction: column;
overflow: scroll;
overflow-x: hidden;
}
.entry {
padding: 15px;
background: cadetblue;
}<div id="wrapper">
<div id="title"></div>
<div id="entries">
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
</div>
</div>
<div id="bottom-element"></div>An expanding div is intended to reach up to 80% of the screen from the bottom. Is there a fix to this problem? I adjust the top value dynamically to expand my element, so maintaining the layout is crucial in any proposed solution.