Databases
StackOverflow2013
Postsdbo
POjQuery: How to make header and footer not scroll?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery: How to make header and footer not scroll?
    text
    copied!<p>I have a header and footer plus a listview in the main html5 body but the issue that I am having is that when the listView is large, it scrolls the whole page including the header.</p> <p>what I am trying to achieve is to just make the listview scrollable and nothing else so that the header and footer is always visible.</p> <p>Is this possible in html5/jquery?</p> <p>edit:</p> <p>Here is what I have tried.</p> <pre><code>&lt;link href="src/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" /&gt; &lt;script src="src/jquery-1.6.4.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="src/jquery.mobile-1.0.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;body&gt; &lt;div data-role="page" id="page"&gt; &lt;div data-role="header" data-position="fixed"&gt; &lt;a href="" onclick="history.back(-1); return false;"&gt;Back&lt;/a&gt; &lt;h1&gt;Claim Items&lt;/h1&gt; &lt;/div&gt; &lt;div data-role="content"&gt; &lt;h3 style="margin-left:1em"&gt;The Demo Title&lt;/h3&gt; &lt;ul data-role="listview" id="itemList" data-inset="true" data-scroll="true"&gt; &lt;li&gt;&lt;a href="#page2"&gt;1: demo&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#page2"&gt;2: demo&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#page2"&gt;3: demo&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div data-role="footer" data-position="fixed" class="ui-bar"&gt; &lt;div data-role="navbar"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="fdfd.html"&gt;Add an Item&lt;/a&gt;&lt;/li&gt; &lt;li&gt; &lt;a href=""&gt;Remove an Item&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Add comment&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload