0

ハッカソンで作業していて、電話のモックアップに問題があります。テキスト ストリームを一番下に固定したい: 位置を決める絶好の機会のように思える: 絶対的な...そうですか? これにより、スクロールが機能しなくなります。現在、それは上に固定され、相対的に配置されており、スクロールは機能します。

「I said...」ボタンを数回クリックしてみてください。理想的には、これらのボタンは (表示されるテキスト ボックスと共に) 下部に固定する必要があります。

これは一時的な URL です。

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

ボタンを絶対位置に配置し、jquery/javascriptを少し使用して最小の高さにしました。みなさん、ありがとうございました！

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

position: fixed を試しましたか? 概念の証明として、リンクを観察すると、次のようになります。

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

編集: 3 つのプレースホルダー会話を可視性: 非表示のプレースホルダーとして配置します (これにより、スペースを占有することが保証されます)。

<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 つの実際のエントリのそれぞれについて、プレースホルダーの 1 つを削除します。さらに精度が必要な場合は、actualConvoで padding-top を使用して同じプレースホルダー効果を再現できます。ボトムアウトが 0 になるまで、padding-top を固定値だけ減らします。ボタンをスクロール可能にしたい場合は、スタイリングを削除して、より高い DOM レベルで padding-top を適用します。

于 2012-10-21T06:46:09.527 に答える