How to style the content while rendering it along with the fixed elements?

While rendering any content along with fixed elements such as header or toolbar, the content gets rendered as it is. Hence some parts of the contents get hidden behind the fixed elements. For example, when you use Header control and its position is fixed, then any content given under the header, a part of the content gets hidden behind the header.

You can overcome this issue by rendering scrollpanel for the content. By default, the scrollpanel applies the styles for the content to be aligned properly while rendering along with the fixed elements.

HTML

<div data-role="ejmheader" data-ej-title="Header"  id="header" ></div>
<div data-role="ejmscrollpanel" id="pagescroll" data-ej-target="deviceready"></div>
    <div id="deviceready">
        <div>
            <!--Content in here-->
            The Essential JavaScript Mobile Rotator widget is a container that holds many items. By swiping left and right you can see the next and previous items respectively. Each item in Rotator contains HTML template content.
        </div>
    </div>