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>