If I am understanding your question correctly, you are looking to keep everything the same except for ensuring that the scrollable content is not hidden behind the fixed header.
The fixed header appears to have a default height of approximately 20px.
To resolve this issue, you can add a top margin to the scrollable content to push it down from the top and prevent it from being obscured by the header.
You can achieve this effect by including the following CSS:
div.list { margin-top: 20px;}
This CSS rule will move the container holding all the list items 20px from the top of the page.
Check out the DEMO here: http://codepen.io/anon/pen/EVWYJd
UPDATE
The previous solution assumes a known height for the fixed header. However, feedback in the comments indicates that the header's height may vary. Therefore, we need a solution that keeps the scrollable content below the header regardless of its height.
This specific issue has been discussed further in these helpful posts:
- How do I use CSS to position a fixed variable height header and a scrollable content box?
- Creating a variable height "fixed" header in CSS with scrollable content