Don't use calc() for dynamic height in CSS

The primary function of calc() is to determine the container's dynamic width and height to produce layout experiences with flexible dimensions. It supports four arithmetic operations: addition (+), subtraction (-), multiplication (*) and division (/).

Let's see a quick example

<div class="container">
    <header>
        <div> Hi I'm a HEADER </div>
    </header>
    <main>
        <!-- you can add more content here to see scroll -->
        <div> Hi I'm a CONTENT </div>
    </main>
    <footer>
        <div> Hi I'm a FOOTER </div>
    </footer>
</div>

/* style fot the above html */
body {
    margin: 0;
    padding: 0;
    font-size: 20px;
}
header {
    background: #9acbdc;
    padding: 16px;
}
footer {
    background: #9acbdc;
    padding: 16px;
}
main {
    background: #efe9dc;
    padding: 12px;
    height: calc(100vh - 134px);
    overflow: auto;
}

And this would be the outcome:

Demo:

https://codepen.io/yatharthaa/pen/XWydaKq

In the above example, you can see that the <header> & <footer> remains sticky and only content is scrollable as we have dynamically set the content value with calc().

Till this point, everything seems clear and intelligible. You probably found the solution to your problem. But hold on, what if we insert another div inside the container?

Everything will be messed up, Now again we have to re-calculate height and subtract it from 100vh. That is a real pain each developer deals with.

But you don't have to worry further I got you a solution.

If you are a frontend developer, you probably must hear about display: flex and overflow: auto CSS property. Now just make the container display: flex with height:100vh and the content area which needs to be scrollable to set flex:1 and overflow: auto.

Let's illustrate with an example

<div class="container">
    <header>
        <div> Hi I'm a HEADER </div>
    </header>
    <main>
        <!-- you can add more content here to see scroll -->
        <div> Hi I'm a CONTENT </div>
    </main>
    <footer>
        <div> Hi I'm a FOOTER </div>
    </footer>
</div>

/* style fot the above html */
body {
    margin: 0;
    padding: 0;
    font-size: 20px;
}
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
header {
    background: #9acbdc;
    padding: 16px;
}
footer {
    background: #9acbdc;
    padding: 16px;
}
main {
    flex: 1;
    background: #efe9dc;
    padding: 12px;
    overflow: auto;
}

The result would still be the same. But as you noticed we didn't mention any height on any div. Using a flex & overflow will do its magic.

Demo:

https://codepen.io/yatharthaa/pen/bGQVewE

Conclusion

Keep in mind that calc() is another strong CSS property you should utilize, but only on the presumption that no further blocks or text will be added. However, it is preferable to employ flex and overflow, which enable effortless scrolling of your content area either you add blocks or remove blocks.

I hoped you found this information useful. Any additional queries you may have are welcome, so don't hesitate to ask. I'm always glad to assist.

Don't use calc() for dynamic height in CSS

Comments (2)

More from this blog

What Does a Designer Actually Do When the Software Starts Deciding?

Mastering useRef in React: A Practical Guide

Why Google Translate Crashes Your React App (and How to Fix It)

Seamless MySQL Upgrade: Achieving Zero Downtime with AWS Blue/Green Deployments

UX/UI Trends: That Will Change The Shape of Digital Experience

Conclusion

Command Palette

Comments (2)

More from this blog

Conclusion