Question

在黑客马拉松中工作，我们的手机样机出现问题。我们想把文本流锚定到底部：看起来像是一个绝佳的机会：绝对......对吗？好吧，这使得我们的滚动不起作用。现在它固定在顶部，相对定位，滚动确实有效。

尝试点击“我说...”按钮几次。理想情况下，这些按钮应该锚定（连同出现的文本框）到底部。

这是临时网址：

和永久的JS小提琴网址：

以下是简单的HTML：

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

任何解决方案？我们将开放javascript，CSS，任何组合。提前谢谢！

Answer 1

你尝试过的位置：固定吗？观察你的链接，作为一个概念的证明，这样的事情应该做：

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

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

<div class="convoCont">
    <div class="actualConvo" style="">
        <div class="invisibleFirst">
            <div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
            <div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
            <div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
        </div>          
    </div>
    <div class="addLine" style="position: fixed; bottom: 60px; width: 290px;">
        <div class="isaid textLine">I said...</div>
        <div class="tsaid textLine">They said...</div>
    </div>
    <br class="clear">
</div>

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

Answer 2

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

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

使用CSS重新创建电话短信用户界面：在保持滚动的同时将绝对定位对话调至底部

2 个答案: