Question

I’m writing a mobile/desktop chat application that is supposed to utilize the entire screen. The bottom <div> shown in yellow can be fixed-height if it needs to be.

presently it’s Absolutely positioned to the bottom of the window.

My problem: the top <div>, in cyan, doesn’t fit to the rest of the window, regardless of whether I use padding, margin, border, etc. Presently it appears to allow the content to wrap, but that’s only because the bottom overwrites the scroll bar.

My only solution so far is to have a final <div> or <br> that pads the end of the scrollable div, but that doesn’t make the div smaller, or make the scroll bars properly align.

Here is my source code so far in Fiddle.

Answer 1

This style code basically sums up what I’m doing to compensate for my issue. (Instead of, say, using HTML tables.) This may not be the best solution.

#topPart {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 40px; /* or however high the bottom is */
}

#bottomPart {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 40px; /* same as above */
}