html - iphone 屏幕外的页脚

Question

指的是following question由我制作，我问我如何通过设置内容高度减去页脚高度来适应页眉和页脚之间的内容解决了问题，但实际上当我尝试将网站添加到任何 iPhone 上的主屏幕时页脚消失了画面如下:



如您所见，页脚仅部分可见，要查看它，我必须向下滚动整个页面(不是中心内容，而是页面)，而该问题不会在网络或 Android 设备上持续存在。

如果设备是 iphone，我尝试将更多像素减去内容高度，但没有效果，我尝试了以下代码:

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

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

但是 View 还是一样，整个css和html代码你可以在下面看到 jsfiddle

Answer 1

如果我正确理解您的问题，目标是始终固定页眉和页脚并允许中心的内容滚动。您已经通过基于 viewHeight 的绝对定位和计算实现了这一点。

问题在于vh的执行在移动设备上非常不一致。这些问题不太可能很快改变(见 this)。

因此，我建议修改您的布局以减少对 viewHeight 的依赖。有多种方法可以做到这一点，但 flexbox会给你一个简单的解决方案。

这是如何实现这一点的最小示例。您必须根据需要将其应用于您的代码。

.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>