绝对定位li的高度不适用于响应式设计

Question

我需要弄清楚我将如何反应地展示我的内容。我正在使用jQuery滑入和滑出（水平）li项目，因此它们绝对定位。但是有些项目的文字比其他项目更多，当我改变屏幕尺寸来模拟移动设备时，绝对定位的li会在页脚上滑落或者只是在底部被剪掉。如果我使用最小高度，那么我必须根据最长的li来计算所需的高度。我宁愿不这样做。是否有另一种方式来响应地构建此页面并使用绝对定位的内容？即使使用jQuery，如果我需要？

<div class="wrapper">
<ul class="container">
<li>… short copy</li>
<li>… long copy</li>
</ul>
<footer>…</footer>
</div>


.wrapper{
width:100%;
}
.container{
width:80%;margin:0 auto;position:relative;max-width:1280px;
}
li{
position:absolute;width:100%;
}

Answer 1

您可以使用媒体查询根据屏幕宽度控制包装的最小高度：

@media (max-width: 480px) {
  .wrapper {
    min-height: 600px;
  }
}