jQuery Mobile, set footer to bottom of screen without using data-position="fixed", is it possible?
===

I want to set the footer to attach at the bottom of the screen, this can easily be done by setting `<div data-role="footer" data-id="persistent_navbar" data-position="fixed">` as detailed on the jquery [documentation][1]

However, that seems to yield the following undesired output :

![enter image description here][2]


So by removing the `data-position="fixed"`, the footer then neatly fits into the target content width, but it floats up underneath the main content, like so :

![enter image description here][3]

**Question:** How can I attach the footer to the bottom of the screen, but at the same time ensuring that the footer doesn't overflow from its container? The ultimate goal is to have a scrolling list between the header and footer.

This is my HTML for the above :

    <!DOCTYPE html>		
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    		<title>SmartConf</title>
    		<link rel="shortcut icon" href="images/favicon.png" />
    		<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
    		<link rel="stylesheet" href="css/reset.css" />
    		<link rel="stylesheet" href="css/SmartConf.css" />
    		<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
    	</head>
    	<body onload="WL.Client.init({})" id="content" style="display: none">
    		
    		<div data-role="page">
    				<div data-role="header">
    					<h1>Welcome</h1>
    				</div><!-- /header -->
    			
    				<div data-role="content">
    				<a href="home.html" data-role="button">Enter</a>	
    		
    				</div><!-- /content -->
    			
    				<div data-role="footer" data-id="persistent_navbar">
    					<h4>Some footer here</h4>
    				</div>
    			
    			</div><!-- /page -->
    
    
    
    		<script src="js/SmartConf.js"></script>
    		<script src="js/messages.js"></script>
    		<script src="js/auth.js"></script>
    		<script src="js/jquery/jquery.mobile-1.1.1.js"></script>
    	</body>
    </html>

The `SmartConf.css` :

    /*Worklight container div */
    #content {
    	height: 460px;
    	margin: 0 auto;
    	width: 320px;
    }

Thanks


  [1]: http://jquerymobile.com/test/docs/toolbars/bars-fixed.html
  [2]: http://i.stack.imgur.com/Dtzvb.png
  [3]: http://i.stack.imgur.com/Uc4Qw.png