cssresponsive-designflexboxadaptive-layout

Fix chatbox to bottom, or adapt height to content

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.

enter image description here

Solution

  • 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>