Question

I’m currently designing a chat website. The layout will be very simple.

I want a div containing all the messages taking all the screen but 20 pixels on the bottom of the screen reserved for the form field to send messages.

The HTML code could look like this :

<div id="messages">
...
</div>
<input type="text" id="message" />

How can you render this kind of layout using CSS3 ?

Answer 1

I don’t see what’s wrong with using absolute positioning in this situation:

#messages {
    position: absolute;
    top: 0;
    bottom: 20px;
    left: 0;
    right: 0;
    overflow: auto;
}

#message {
    position: absolute;
    bottom: 0;
    height: 20px;
    left: 0;
    right: 0;
}

See this jsFiddle for a live example
(colors added for clarity as to where the two elements begin/end)