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

【问题标题】：absolute positioned li's height not working for responsive design绝对定位的李的高度不适用于响应式设计
【发布时间】：2014-02-13 14:46:28
【问题描述】：

我需要弄清楚我将如何响应地显示我的内容。我正在使用 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%;
}

【问题讨论】：

不是 100% 确定您要做什么，也许将 overflow: hidden; 添加到 .container css
澄清：当 li 变窄时（比如在 480px w 设备上），文本会更长，并且会在页面下方延伸得更多。发生这种情况时，它会与下面的内容（以及它的容器）重叠，或者如果比视口长，则会被截断。有意义吗？
我明白了，让我想想
你试过将字体大小设置为 1em 吗？也许它会阻止文本扩展？
设置字体大小不会影响它重叠或截断。

标签： jquery css responsive-design

【解决方案1】：

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

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

【讨论】：

是的，这会有所帮助。我一直在寻找一种不必处理设置最小高度的方法，但我可能不得不接受这一点，这样我的内容就不会下降太多。谢谢。
如果您希望包装器绝对定位，我认为没有办法使用纯 CSS。正常流程无法知道包装器在做什么。如果答案有帮助，欢迎投票！谢谢。
谢谢。包装器不是绝对定位的。我只有 li 的绝对定位。我很想给你投票，但我似乎还没有这个功能。
对不起，我的意思是 li 的位置是绝对的；不是包装。我的观点是，主要内容是从流程中拉出来的，所以容器里面什么都没有，也无法知道它应该是什么高度。使用纯 CSS，在该容器上强制执行任何高度的唯一方法是明确告诉它。如果主要内容的流出高度响应其环境，则必须告知该容器通过高度或最小高度做出相应响应。如果你希望它根据屏幕宽度进行更改，则需要使用媒体查询（或 js）。