Home/ Questions/Q 8108181
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T01:01:17+00:00

I want to create such layout: +———–container———–+ | +—–fixed-height-div——-+| | +——-fixed-height-div—–+| | +-fill-height-scrollable-div-+| | +-fixed-height-bottom-div-+| +———end-container——-+ The problem

  • 0

I want to create such layout:

+———–container———–+
| +—–fixed-height-div——-+|
| +——-fixed-height-div—–+|
| +-fill-height-scrollable-div-+|
| +-fixed-height-bottom-div-+|
+———end-container——-+

The problem is how to make fill-height-scrollable-div to fit all available space. See example for more details.

Here is an example: http://jsfiddle.net/SkeLLLa/fz2C7/

Are there any not javascript ways to set div.chat-user-list-cnt to fit all available height and make div.chat-bot-btns-cnt stick at the bottom of div.chat-list ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In your demo, everything has a fixed height except the “scrollable div”, and your outer div is absolutely positioned (well, position: fixed, but close enough).

    What you need to do is take advantage of the fact that you can set for example position: absolute; top: 50px; bottom: 50px on your “scrollable div”.

    See: http://jsfiddle.net/thirtydot/UPG6A/ (simplified version)

    • 0