Footer out of screen on iphone

Question

referring to the following question made by me where i was asking on how could i fit the content between the header and the footer by setting content height minus footer height solved the problem but actually when i try to add the web site to Home screen on any iPhone the footer goes out of screen as the following:

As you can see the footer is visible only in part and to see it i have to scroll the whole page down (not the central content but the page) while that problem doesn't persist on web or Android devices..

I've tryed to subtract more pixels to content height if the device is an iphone but it had no effect, i've tryed the following code:

if (navigator.userAgent.match(/iPhone/i)) {
    $('.tableFixHead').addClass('tableFixHead-mobile');
}

.tableFixHead-mobile {
    max-height: calc(100vh - 500px) !important;
}

But the view remain still the same, the whole css and html code you can see in the following jsfiddle

Answer 1

If I understand your question correctly, the goal is to always have the header and footer fixed and allow the content in the center to scroll. You've accomplished this with absolute positioning and calculations based on viewHeight

The problem is that the implementation of vh is extremely inconsistent on mobile devices. And these problems are unlikely to change any time soon (see this).

So, I would recommend revamping your layout to reduce the dependency on viewHeight. There are multiple ways to do this but flexbox would give you an easy solution.

Here's a minimal example of how to implement this. You'll have to apply it to your code as needed.

.contentWrapper {
 /* this needs to fill the viewport
 position fixed will work on modern mobile devices. */
 position: fixed;
 top:0; right:0; bottom:0; left:0;
 /* add flex-box */
 display:flex;
 flex-direction:column;
}

header, footer {
 background-color: darkgray;
 flex-basis: 50px;
 padding: 20px;
 box-sizing: border-box;
}
.mainContentArea {
 /* set this to fill the center space */
 flex-basis: calc(100% - 100px);
 /* make it scroll */
 overflow-y: auto;
}

<div class="contentWrapper">
 <header>Fixed Header</header>
 <div class="mainContentArea">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pellentesque nec quam et imperdiet. Nullam vel euismod nisl, sed viverra magna. Cras nec ex ligula. In laoreet ornare nunc ut pellentesque. Phasellus lobortis vehicula lacus, et tempor dui scelerisque sit amet. Cras porttitor leo a mauris eleifend, sed sodales mi tempor. Morbi molestie, est sit amet consequat viverra, lacus arcu lobortis sapien, quis maximus dui sem nec erat. Nullam blandit tellus et dui lacinia aliquam. Morbi non gravida nisl, ac viverra tellus. Donec viverra diam ut malesuada bibendum. Sed vehicula orci eu enim aliquam, ac faucibus mauris molestie.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pellentesque nec quam et imperdiet. Nullam vel euismod nisl, sed viverra magna. Cras nec ex ligula. In laoreet ornare nunc ut pellentesque. Phasellus lobortis vehicula lacus, et tempor dui scelerisque sit amet. Cras porttitor leo a mauris eleifend, sed sodales mi tempor. Morbi molestie, est sit amet consequat viverra, lacus arcu lobortis sapien, quis maximus dui sem nec erat. Nullam blandit tellus et dui lacinia aliquam. Morbi non gravida nisl, ac viverra tellus. Donec viverra diam ut malesuada bibendum. Sed vehicula orci eu enim aliquam, ac faucibus mauris molestie.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pellentesque nec quam et imperdiet. Nullam vel euismod nisl, sed viverra magna. Cras nec ex ligula. In laoreet ornare nunc ut pellentesque. Phasellus lobortis vehicula lacus, et tempor dui scelerisque sit amet. Cras porttitor leo a mauris eleifend, sed sodales mi tempor. Morbi molestie, est sit amet consequat viverra, lacus arcu lobortis sapien, quis maximus dui sem nec erat. Nullam blandit tellus et dui lacinia aliquam. Morbi non gravida nisl, ac viverra tellus. Donec viverra diam ut malesuada bibendum. Sed vehicula orci eu enim aliquam, ac faucibus mauris molestie.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pellentesque nec quam et imperdiet. Nullam vel euismod nisl, sed viverra magna. Cras nec ex ligula. In laoreet ornare nunc ut pellentesque. Phasellus lobortis vehicula lacus, et tempor dui scelerisque sit amet. Cras porttitor leo a mauris eleifend, sed sodales mi tempor. Morbi molestie, est sit amet consequat viverra, lacus arcu lobortis sapien, quis maximus dui sem nec erat. Nullam blandit tellus et dui lacinia aliquam. Morbi non gravida nisl, ac viverra tellus. Donec viverra diam ut malesuada bibendum. Sed vehicula orci eu enim aliquam, ac faucibus mauris molestie.</p>
 </div>
 <footer>Fixed Footer</footer>
</div>

Answer 2

.footer {
  z-index: 9;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f5f5f5;
}

The above is your code. Just change from position:absolute to position:fixed.

Answer 3

Reading this SO it seems that when setting position: absolute, you must add left: 0 and right: 0 properties to .footer in order that the bottom: 0 will work on iphone and ipad.

Didn't test it myself yet, but it was upvoted so i guess someone else found that useful.

After digging more SO's i found also this that related to this issue.

Worth to mention that caniuseit shows that from version 11 there is full support of absolute position and they not mention any sort of the above..

I guess you will test it before me, hope that will do it.

EDIT: As those SO that i linked above (also) mention, and also following the docs, in order for the position: absolute would work as expected, it parent element should have any position - and that make sens. Seems that form id="form" is the parent (base on this fiddle), so i would add position: relative; to body itself.

Hope that will work.. Can't test it myself.

Answer 4

Run the following snippet, if your question was correctly understood then the result is the visual effect you want to achieve. If yes, then check the dimensions of the elements and their position in the code below.

* {
  margin: 0;
  padding: 0;
}

body {
  display;
  flex;
  align-items: center;
  align-content: center;
  justify-content: stretch;
  flex-direction: column;
  text-align: center;
  width: 100%;
  height: 100%;
}

header,
footer {
  background: #000;
  color: #fff;
  height: 3rem;
  width: 100%;
}
main div {
  padding: .5rem 0;
}
main {
  background: orange;
  width: 100%;
  min-height: calc(100% - 6rem);
  height: auto;
  position: relative;
  top: 3rem;
  margin-bottom: 2rem;
  overflow: hidden;
}

main p {
  height: 2rem;
}

header {
  position: fixed;
  top: 0;
  z-index: 1;
}

footer {
  position: fixed;
  top: calc(100% - 3rem);
}

<header>this is header content</header>
<main>
  <div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <p>14</p>
    <p>15</p>
    <p>16</p>
    <p>17</p>
    <p>18</p>
    <p>19</p>
    <p>20</p>
  </div>
</main>
<footer>this is footer content</footer>