Question

我正在创建一个用于评论的页面，其中包含用户的评论和评论输入，评论输入固定在底部。问题是它可以在桌面上正常工作，但是当我在iPad iOS 11上尝试时，注释输入框随页面滚动，而不是固定在底部。
这是我的代码：JSFiddle

CSS

.xi-ipad-scroll {
  height:500px;
  overflow:hidden;
  background:green;
}
.xi-comment {
  width: 40%;
  bottom: 0;
  position: fixed;
}
.xi-comment-box {
  width: 100%;
  font-size: 15pt;
  font-weight: 700;
}
.xi-comment-send {
  bottom: 15px;
  position: fixed;
}

HTML

    <div class="xi-ipad-scroll">
  <div class="xi-main-title">Bình luận</div>

  <div class="xi-comment-list">
    <ul>
      <li>
          <div>Quang Anh Nguyễn</div>
          <div>Lorem ipsum dolor sit amet, illum prompta sadipscing cu sit. Ea mei lorem erroribus honestatis, laoreet torquatos eu mel, nam dicant labitur tractatos et. Cu est alia altera consulatu, vim falli detracto reformidans in, novum forensibus eu sit. At etiam erroribus prodesset qui, eam veniam laoreet at. Ea mei natum erant.</div>
      </li>
      <li>....</li>

    </ul>
  </div>

    <div class="xi-box xi-comment">
      <textarea type="text" placeholder="Comment..." class="resizable xi-comment-box" rows="1"></textarea>
    </div>


</div><!--iPad-->

我在互联网上搜索了类似-webkit-backface-visibility: hidden;或z-index:100的解决方案，但都无济于事

Answer 1

如果我了解您要正确执行的操作，则实际上是造成此问题的原因是“ position：fixed”。固定位置将始终显示在屏幕上。 More info on fixed position.如果希望它位于所有内容的底部，则需要从-send和-comment中删除该固定内容。

.xi-comment {
  width: 40%;
  bottom: 0;
  ***position: fixed;***
}

.xi-comment-send {
  bottom: 15px;
  ***position: fixed;***
}

这现在导致一个新问题，您已经设置了一个绝对高度，并且隐藏了该高度之外的任何内容。您要么需要增加高度，移除隐藏的内容，要么将注释部分移至该div之外。

我整理了一个codepen来说明这一点。我认为您实际上在台式机上遇到了同样的问题，我只是认为您没有足够的内容让您意识到这一点。

CSS-位置：已修复但无法在桌面设备上使用

1 个答案: