logo标签列表

iPhone上的页脚超出了屏幕

htmlcssios
6

关于我在以下问题中提出的内容，我询问了如何通过设置内容高度减去页脚高度来调整页眉和页脚之间的内容，并成功解决了该问题。但是实际上，当我尝试将网站添加到任何iPhone的主屏幕时，页脚会超出屏幕，如下所示：

enter image description here

正如您所看到的，页脚仅部分可见，要查看它，我必须滚动整个页面向下（不是中央内容而是整个页面），而这个问题在Web或Android设备上不存在..

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

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

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

但是视图仍然保持不变，整个CSS和HTML代码可以在以下的JSFiddle链接中查看。
这只发生在从主屏幕上的链接打开时吗？就像打开应用程序一样全屏打开？还是无论如何都会在任何iOS设备上发生？ - Bryce Howitson
@BryceHowitson 如果我只在Safari中打开它，即使我滚动主内容，也无法看到页脚，但是在全屏幕下，我能看到它的一部分。 - NiceToMytyuk
4个回答
2
如果我理解你的问题正确，目标是始终固定页眉和页脚，并允许中心内容滚动。你已经通过绝对定位和基于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>

是的，那正是我一直在寻找的，经过对 flex-box 的尝试，现在页脚已经可见了，谢谢。 - NiceToMytyuk
0
.footer {
  z-index: 9;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f5f5f5;
}

以上是您的代码。只需将 position:absolute 改为 position:fixed。

实际上，我尝试将其设置为固定值，但没有任何变化。如您在https://imgur.com/8JkSqrX中所见，如果表格中只有少量行，则可以滚动以查看页脚，但是如果表格行数很多并且我必须滚动它们，我就无法到达页脚（或者更好的说法是，如果我到达边缘并尝试滚动主视图，我就可以）。 - NiceToMytyuk
0

阅读此 SO，似乎在设置position: absolute时，您必须在.footer中添加left: 0和right: 0属性才能使bottom: 0在iPhone和iPad上正常工作。

我自己还没有测试过，但它得到了赞同，所以我猜其他人也觉得有用。

在查找更多SO的内容后，我还找到了this与此问题有关。

值得一提的是，caniuseit显示从版本11开始完全支持绝对位置，并且他们没有提到任何上述的内容。

我猜您会在我之前测试它，希望能行。

编辑: 正如我上面提到的 SO (也) 提到的那样，并且遵循 docs，为了使position: absolute按预期工作，其父元素应该有任何位置 - 这很有道理。 看起来 form id="form" 是父元素（基于 this fiddle），所以我会在body本身上添加 position: relative;。

希望这能起作用... 我自己无法测试。

1
我正在尝试在安装有iOS 13的iPhone 7上测试，这应该是Safari的最新版本。我尝试将左侧和右侧都设置为0，尝试让它保持原样（绝对定位），但是没有效果，页脚仍然在内容下方，我必须滚动主容器才能到达页脚。 - NiceToMytyuk
@IgorMytyuk 父元素是否有相对位置？如果没有，请尝试这个。请检查我的编辑。 - A. Meshu
0
运行下面的代码片段，如果您正确理解了您的问题，则结果是您想要实现的视觉效果。如果是，请检查元素的尺寸和它们在下面的代码中的位置。 

* {
  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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接