CSS: Wydajność, lepiej używać calc lub pozycji absolutnej

Question

Mam div div o stałej wysokości. Wewnątrz dwóch elementów div górna wysokość: 50 pikseli i druga musi wypełnić pustą przestrzeń, ale umożliwiając wewnętrzny przewijanie.

Teraz mam dwie opcje:

#up{ 
    height: 50px; 
} 

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

czyli

#up{ 
    height: 50px; 
} 

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

Jeśli mam wiele z tych przypadków w moim oknem, który z nich jest najlepszy do korzystania wydajność mądry?

This Fiddle

PS. Nie dbam o starą obsługę przeglądarki.

Answer 1

Zawsze będę pracować z opcją calc. Oba mogą wyglądać tak samo, ale nie są.

Podczas korzystania z position:absolute wyjmujesz pojemnik #down z przepływu html.

Oznacza to, że jeśli w dowolnym momencie dodasz więcej elementów do projektu, będziesz mieć wiele problemów z ich pozycjonowaniem.

Jako przykład, jeśli chcesz dodać kolejny kontener poniżej #down (może to być stopka), w pierwszej opcji zostanie umieszczony pokrywający się kontener #down tuż pod twoim nagłówkiem. W drugiej opcji zostanie on umieszczony tam, gdzie chcesz.

Answer 2

Jednym ze sposobów wypełnienia przestrzeni byłoby użycie 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>