I have created a fiddle to demonstrate my question. Essentially, I am looking to create a scrollable container with padding at the top and bottom that remains visible during scrolling, ensuring there is always a consistent distance from the edge to the content.
<div class="container">
<!-- content without extra wrapper -->
<h1>This is the layout I desire</h1>
<p> ... </p>
</div>
I have only been able to achieve this effect by adding an additional wrapper inside the container. Does anyone know of a workaround that doesn't necessitate introducing another element?
<div class="container">
<!-- extra wrapper causing dissatisfaction -->
<div class="inner">
<h1>This is how I currently implement it</h1>
<p> ... </p>
</div>
</div>