Question

For a simple chat application, I thought of using this simple layout:

*----------------------------------*
|<div>                             |
|                                  |
|                                  |
|                                  |
+----------------------------------+
|<input type text>            |Send|
+----------------------------------+

i.e., at the bottom we have a form consisting of a textfield for typing in messages as well as a button for sending them. The rest of the screen shall be a <div> where the messages are shown. The <div> should take up the remaining space, and the textfield should stretch horizontally.

My main problem is stretching the div. No matter what I do, it doesn’t seem to stretch. I’ve tried setting height to 100%, tried to position is absolute, but didn’t help. Any ideas?

Answer 1

If you place the form inside the div and set them both to absolute, that should do it… This works in Chrome, haven’t tested elsewhere:

HTML:

<div id="convo">
    <form id="talk" method="post" action="#">
        <input type="text" name="talk" />
        <input name="send" id="send" type="submit" value="Send" />
    </form>
</div>

CSS:

* {
    box-sizing: border-box;
    margin: 0 auto; padding: 0;
}

input[type=text] {
    width: 90%;
    height: 100%;
} 

#talk, #convo {
    position: absolute;
    width: 100%;
    border: 4px solid SteelBlue;
}

#talk {
    height: 7.5%;
    bottom: 0;
}

#convo {
    height: 100%;
    background-color: DarkSlateGray;
}