Question

Working in a hackathon and we are having an issue with our phone mockup. We want to anchor the text stream to the bottom: seems like a great opportunity for position: absolute…right? Well that makes it so that our scrolling doesn’t work. Right now it is anchored to the top, positioned relative, and scrolling does work.

Try clicking the “I said…” button a few times. Ideally those buttons should be anchored (along with the text boxes that appear) to the bottom.

This is the temporary URL:

http://gotinto.com/text/

AND a PERMANENT JS Fiddle URL:

http://jsfiddle.net/Qyn7V/

Here is the simple HTML:

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

Any solutions? We would be open to javascript, CSS, any combination. Thanks in advance!

Answer 1

I ended up positioning the buttons absolute, then using a bit of jquery/javascript to make a minimum height. Thanks for your help everyone!

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