0

在黑客马拉松中工作，我们的手机模型有问题。我们想将文本流锚定到底部：似乎是一个很好的位置机会：绝对......对吗？好吧，这使得我们的滚动不起作用。现在它被锚定在顶部，相对定位，并且滚动确实有效。

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

这是临时网址：

http://gotinto.com/text/

和一个永久的 JS Fiddle URL：

http://jsfiddle.net/Qyn7V/

这是简单的 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 以及任何组合。提前致谢！

4

2 回答 2

0

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

<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 复制相同的占位符效果。只需将 padding-top 减少一个固定值，直到它在 0 处触底。如果您想让按钮可滚动，只需删除样式并在更高的 DOM 级别应用 padding-top。

于 2012-10-21T06:46:09.527 回答
0

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

var contH = $('.phoneDisplay').css('height');
    if($('.convoCont').css('height') < contH) {
        $('.convoCont').css('height',contH);
    }
于 2012-10-21T17:46:22.173 回答