Fix chatbox to bottom, or adapt height to content

Question

NO JS, Only CSS, flexbox allowed

JsFiddle : https://jsfiddle.net/ex9fmqxv/

.mdl-layout
 .mdl-layout__inner-container
   .mdl-layout__header
   .mdl-layout__drawer
   .mdl-grid
    .mdl-cell
      ul (list-msg adaptive height)
      div (chat box fixed to bottom)
   .mdl-grid (user list)

I am trying to do a test of a responsive website in 100% height/width of the screen using for GMD react.

I would like every time we resize the window, it can recalculate the height of the content and adapt to this one like Slack.com.

Using jQuery I know how to calculate height to put all this well but without using anyone have any idea?

In the picture you can see what I want that calculation automatically.

If you have another solution for the chat bar is still footer and the central content is scrollable I'm interested.

`I would like every time we resize the window, it can recalculate the height of the content and adapt to this one like Slack.com.` This needs JS. But you asked by a CSS solution. CSS can't calculate anything based on event triggering like resize. Sorry. — Marcos Pérez Gude, Sep 19 '16 at 16:34
I know Slack use JS, but I wondered if it was possible to do without — artSx, Sep 19 '16 at 16:37

score 4 · Answer 1 · answered Sep 20 '16 at 10:51

I would tell that flexbox approach is a better option for this case. Here follows an example:

*,*:after,*:before{
  box-sizing: border-box;
}

body{margin:0}

main{
  width: 100%;
  height: 200px;
  max-height: 200px;
  
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  flex-flow: column nowrap;
}

section{
  width: 100%;
  overflow-y: scroll;
  background-color: red;
  flex: 1 auto;
  height: 100%;
}

.input{
  width: 100%;
  flex: 0 0 auto;
  background-color: green;
}

textarea{
  width: 100%;
  max-width: 100%;
}

<main class="flex parent">
  <section class="red">
    <ul>
      <li>Chat bubble</li>
      <li>Chat bubble</li>
      <li>Chat bubble</li>
      <li>Chat bubble</li>
      <li>Chat bubble</li>
      <li>Chat bubble</li>
      <li>Chat bubble</li>
      <li>Chat bubble</li>
      <li>Chat bubble</li>
      <li>Chat bubble</li>
    </ul>
  </section>
  <div class="input green">
    <textarea>Try resiring me!</textarea>
  </div>
</main>

Warning you can manipulate the textarea part using the textarea resize, using it manually is wierd, as downwards mouse movement will result in result in box growing upward. This should be probably fixed, by making it no-resize and editing height of textbox whenever a new line of text is added/removed using onchange event.

However for testing sake I left it as it is, as it nicely demonstrates what flexbox can do.

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

You can do this with flexbox and viewport units.

Viewport units are used like percentages, 50vh is equal to 50% of the viewport's height.

This is a minimal example for demonstration purposes.

Relative Header and Footer

Header (13vh) + Main (74vh) + Footer (13vh) = 100vh (100% viewport height)

body {
  margin: 0;
  display: flex;
  flex-direction: column;
}
main {
  flex-basis: 74vh;
  overflow-y: auto;
  background-color: rgba(162, 196, 162, 0.5);
}
header,
footer {
  flex-basis: 13vh;
  background-color: rgba(162, 192, 232, 0.5);
}

<header>
  Header
</header>
<main>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
</main>
<footer>
  Footer
</footer>

Fixed Header and Footer

Use calc() to subtract total of fixed heights from full viewport height to set for the variable height element.

body {
  margin: 0;
  display: flex;
  flex-direction: column;
}
main {
  flex-basis: calc(100vh - 200px);
  overflow-y: auto;
  background-color: rgba(162, 196, 162, 0.5);
}
header,
footer {
  flex-basis: 100px;
  background-color: rgba(162, 192, 232, 0.5);
}

<header>
  Header
</header>
<main>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
</main>
<footer>
  Footer
</footer>

You should show him how to use the flexboxes, as they are the ultimate solution here. — Akxe, Sep 19 '16 at 16:55
Well the vh method is good, but won't work on all screens, unless is used with media queries. And calc is more compatible that flexbox, but the you have to be specific for every element in context and you have to always edit all of involved parts, where in flexbox you would only edit the part you want, and the rest would get computed. And since OP is using Material design, he wants only compatibility till IE9, that flexbox can offer. — Akxe, Sep 19 '16 at 17:32
@Akxe thank you for the details, I am fortunate not to worry about IE9 so it should go and I know how use flexboxes property but I hadn't thought to use it like that — artSx, Sep 19 '16 at 18:12
@hungerstar thank you ! I've just change my height:calc() value by vh instead of px and it worked ! — artSx, Sep 19 '16 at 18:17
@artSx PS.: The flexbox way would give you the possibility to change height of the textbox as user types longer message, as you could only specify min-height. — Akxe, Sep 19 '16 at 18:26
@Akxe you have any example ? I am trying to do different test I don't feel it's working — artSx, Sep 20 '16 at 09:04
@artSX I'll make one as soon as I'll get to PC, and it will be as second answer. — Akxe, Sep 20 '16 at 10:09
@Hacke working in Chrome (v92) on Android (v11) for me. You'll have to be more specific. — hungerstar, Aug 16 '21 at 18:15

Fix chatbox to bottom, or adapt height to content

2 Answers2

Relative Header and Footer

Fixed Header and Footer