Javascript 使用CSS重新创建手机短信UI：在保持滚动的同时将对话绝对定位到底部

在一家黑客俱乐部工作，我们的手机模型出现了问题。我们希望将文本流锚定到底：这似乎是定位的绝佳机会：绝对……对吗？这使得我们的滚动无法工作。现在它被锚定在顶部，相对定位，滚动确实有效

试着点击“我说…”按钮几次。理想情况下，这些按钮应固定在底部（与出现的文本框一起）

这是临时URL:

和一个永久的JS Fiddle URL：

以下是简单的HTML：

    <div class="convoPhone">
    <div class="phoneDisplay">
    <div class="convoCont">
    <div class="actualConvo">...(the actual text convo goes here)...</div></div></div></div>

…（这里是实际的文本conva）。。。

---

有什么解决办法吗？我们将对javascript、CSS、任何组合持开放态度。提前谢谢

你试过位置：固定吗？观察您的链接，作为概念证明，类似的操作应该：

<div class="addLine" style="position: fixed; bottom: 60px; width: 290px;">

编辑： 将三个占位符对话放置为具有可见性的占位符：隐藏（这确保它们占用空间）

我：移除
我：移除
我：移除
我说。。。
他们说。。。

---

然后，对于前3个真实条目中的每个条目，删除其中一个占位符。如果您想要更高的精度，您可以通过在actualConvo上填充顶部来复制相同的占位符效果。只需将padding top减少一个固定值，直到它的底部为0。如果要使按钮可滚动，只需删除样式并在更高的DOM级别上应用填充顶部。

我最终将按钮定位为绝对位置，然后使用一点jquery/javascript来设置最小高度。谢谢大家的帮助

var contH = $('.phoneDisplay').css('height');
    if($('.convoCont').css('height') < contH) {
        $('.convoCont').css('height',contH);
    }

var contH=$（'.phoneDisplay'）.css（'height'）；
如果（$（'.convacont'）.css（'height'）

使用临时URL意味着当该页面死掉或被修复时，这个问题对未来的访问者来说将变得毫无用处/毫无意义。请在这里发布相关代码（在您的问题中），并（理想情况下）发布一个我们可以玩和工作的。帮助我们帮助你，做到了！谢谢你的建议！我们希望它上面出现的所有东西也被锚定到底部，而不仅仅是那些按钮。谢谢你的快速回复！有趣。我的理解是，位置是相对于浏览器窗口的固定位置，而不是相对于页面中的元素。因此，在这种情况下，这似乎不起作用。我错了吗？是的。如果要在滚动页面时保持位置，请重新调整按钮，使其在对话部分之后流动。

var contH = $('.phoneDisplay').css('height');
    if($('.convoCont').css('height') < contH) {
        $('.convoCont').css('height',contH);
    }