Search jQuery

jQuery Forum

Fixed footer causes extra scrolling

in jQuery Mobile • 11 years ago

When the fixed footer was added to the page code below, a vertical scrollbar comes up in Chrome desktop equal to about the height of the footer. In my mobile app on Android, I also end up with some vertical drag space where there should be none (all vertical content fits on screen). Is there a way to avoid that?

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
Header
</div>
<div data-role="content">
Content
</div>
<div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed" data-tap-toggle="false">
<h1>Fixed Footer</h1>
</div>
</div>
</body>
</html>

Replies(7)

zSprawl

Re: Fixed footer causes extra scrolling

11 years ago

Does it happen on the mobile device though?

---
http://zsprawl.com

SpuriousS..

Re: Fixed footer causes extra scrolling

11 years ago

Yes. Screens which previously fit in the vertical space with no dragging now have some give to them. No content was added, the footer content was already on the screen just not fixed to bottom.

zSprawl

Re: Fixed footer causes extra scrolling

11 years ago

What version are you using?

---
http://zsprawl.com

SpuriousS..

Re: Fixed footer causes extra scrolling

11 years ago

I'm pulling from CDN in the above example which shows version #s.

SpuriousS..

Re: Fixed footer causes extra scrolling

11 years ago

I'm thinking this behavior is by design unavoidable - without it pages that DO have more content vertically would get cut off by the footer. Examples I see of making fixed footers (outside of JQM) suggest padding your content by the height of the footer for that very reason. For example: http://stackoverflow.com/questions/2571573/css-footer-position-stick-to-bottom-of-browser

Going to explore doing the fixed footer myself and padding/not padding as appropriate for the page I'm on.

zSprawl

Re: Fixed footer causes extra scrolling

11 years ago

I really don't like the implementation of fixed footers, at least in 1.01.

I end up doing something like:

position: absolute;
bottom: 0px;
left: 0px;

But this only really works on panels that do not have scrolling in them, or if you use iScroll, et cetera.

---
http://zsprawl.com

pvmjcaboo..

Re: Fixed footer causes extra scrolling

11 years ago

If I am understanding you correctly this is a built in feature covered in the documentation. Specifically the "updatePagePadding" option for fixed toolbars.

You could use media queries or feature detection to switch between having this option turned on or off. Do be aware that there are issues that arrise without the padding as @SpuriousSignals pointed out.

Doc page:

http://jquerymobile.com/test/#/test/docs/toolbars/bars-fixed-options.html

Here is the excerpt:

updatePagePadding boolean

default: true

Since toolbars can vary in height depending on the content they contain, this option automatically updates the padding on the page element to ensure that fixed toolbars have adequate space in the document when they are statically positioned, and when scrolled to the top or bottom of the page. When enabled, the padding updates during many operations, such as pageshow, during page transitions, and on resize and orientationchange. As an optimization, we would recommend that you consider disabling this option and adding a rule to your CSS to set the padding of the page div to match the EM height of your toolbars, such as .ui-page-header-fixed { padding-top: 4.5em; }. This option is also exposed as a data attribute: data-update-page-paddinge="false"

$("[data-role=header]").fixedtoolbar({ updatePagePadding: false });

Top Reply

Response title

Attachments

jQuery Forum

Fixed footer causes extra scrolling

Replies(7)

Re: Fixed footer causes extra scrolling

Re: Fixed footer causes extra scrolling

Re: Fixed footer causes extra scrolling

Re: Fixed footer causes extra scrolling

Re: Fixed footer causes extra scrolling

Re: Fixed footer causes extra scrolling

Re: Fixed footer causes extra scrolling

Statistics

Tags

Actions