0

I have a site using jQuery Mobile pages. On desktop and tablet devices (@media only screen and (min-width: 800px)) I want to display the page like this: enter image description here

My problems:

  1. On some pages, the contents of the 'content' area will be higher than the available height between header and footer, and I would like the scrollbar ONLY for the content (header and footer are fixed).

  2. On other pages, the contents of the 'content' area will have less height than the space between the header and footer. HOWEVER, I need the content area to be 100% of the available space between header and footer in order to lay out it's contents proportionally.

I've tried various jQuery and CSS (calc(...)) solutions, but it's getting quite hacky. Can you give me a simple solution?

grateful
  • 1,128
  • 13
  • 25
  • did you read this: [set content height 100% jquery mobile](https://stackoverflow.com/questions/21552308/set-content-height-100-jquery-mobile?rq=1) - however, if you stick to `vh` you will experience a lot of trouble with iOS devices... so i believe there isn't an easy solution. – deblocker Dec 02 '17 at 20:28
  • @deblocker Thanks for the tip about iOS! The responses to the question you link are equally or more hacky than my current solutions. The issue being that when, for example, the content has overflow, the footer will not stay at the bottom of the page when new content is created dynamically and the page is scrolled to view it. – grateful Dec 02 '17 at 20:45

0 Answers0