Scrollable Box

- 1 min

CSS has come a long way!

I recently was trying to make a box scrollable within the view. This box should take the height of the viewport, but could have content which exceed that height. Now, back in the day, I would have done this with Javascript. I had gotten ready to bite the bullet and get this written in Javascript, but something asked me to google “Maths in CSS”. I found this post.

CSS Tricks

+-----------------------------------------+  * {
|                   1                     |    --banner-height: 20px;
+-----------+-----------------------------+  }
|           |                             |
|           |                             |  #1 {
|           |                             |    height: var(--banner-height);
|           |                             |  }
|           |                             |
|           |                             |  #2 {
|     2     |              3              |    height: calc(100vh - var(--banner-height));
|           |                             |    overflow-x: hidden;
|           |                             |    overflow-y: auto;
|           |                             |  }
|           |                             |
|           |                             |  #4 {
+-----------+-----------------------------+    height: var(--banner-height);
|                   4                     |  }
+-----------------------------------------+
rss facebook twitter github gitlab youtube mail spotify lastfm instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora quora