Avoid using position: fixed as it can lead to performance issues on mobile devices, particularly during transitions or translations.
Instead, consider using absolute or relative positioning for elements and dynamically adjusting the dimensions of surrounding elements using calc(). This approach works well on all devices without causing performance drawbacks. calc() enjoys strong support across browsers.
HTML
<div class="wrapper">
<div class="content">
<h1>Heading!</h1>
<p>...</p>
<h1>Another heading!</h1>
<p>...</p>
<h1>Yey! Another heading!</h1>
<p>...</p>
</div>
<div class="banner">
<img src="https://placehold.it/600x120" alt="ads" />
</div>
</div>
CSS
body {
margin: 0;
}
.wrapper {
background: #981e32;
width: 600px;
height: calc(100vh - 120px); /* viewport height - fixed banner height */
overflow-y: auto; /* ensures scrollbars appear when needed */
}
.banner {
position: absolute;
bottom: 0;
max-height: 120px;
}
.content {
padding: 1em;
color: white;
}
.banner img {
display: block; /* prevents inline elements from affecting height calculations */
}
Keep in mind that certain assumptions were made for illustrative purposes. Feel free to customize the code to suit your requirements.
SEE DEMO