CSS: performance wise, it's better to use calc or position absolute

Question

I have a fixed height div container. Inside the two divs, the top height is: 50px, and the other should fill the empty space, but allow the inner scroll.

Now I have two options:

#up{ height: 50px; } #down{ position: absolute; top: 50px; bottom: 0; } 

or

 #up{ height: 50px; } #down{ height: calc(100% - 50px); } 

If I have many of these cases inside my window, which one is best used for performance?

This script

ps. I do not need support for the old browser .

Answer 1

I would always work with the calc option. Both may look the same, but it is not.

When you use position:absolute , you take the #down container from the html stream.

This means that if at any time you add more material to your project, you will have many problems positioning them.

As an example, if you want to add another container below #down (possibly a footer), in your first option, it will be placed in the overlapping #down container right below your header. In the second option, it will be placed where you want.

Answer 2

One way to fill the space is to use flexbox .

 .container { display: flex; flex-direction: column; height: 200px; } #up { background: yellow; flex: 0 0 50px; } #down { background: orange; flex: 1 1 auto; } 

 <div class="container"> <div id="up"> up </div> <div id="down"> down </div> </div>