CSS: Leistung weise, besser zu verwenden, calc oder absolute Position

Question

Ich habe ein Container div mit fester Höhe. Innerhalb von zwei divs, die obere Höhe: 50px und die andere muss den leeren Raum füllen, aber interne scroll erlauben.

Jetzt habe ich zwei Möglichkeiten:

#up{ 
    height: 50px; 
} 

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

oder:

#up{ 
    height: 50px; 
} 

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

Wenn ich viele dieser Fälle in meinem Fenster haben, welches ist die beste weise Leistung zu benutzen?

This Fiddle

ps. Es ist mir egal, alte Browser-Unterstützung.

Answer 1

Ich würde immer mit calc Option arbeiten. Beide könnten gleich aussehen, sind es aber nicht. Wenn Sie position:absolute verwenden, nehmen Sie den Container #down aus dem HTML-Flow.

Das bedeutet, dass Sie, wenn Sie Ihrem Projekt mehr Daten hinzufügen möchten, viele Probleme haben werden, diese zu positionieren.

Als Beispiel, wenn Sie einen weiteren Container unter #down (eine Fußzeile vielleicht) hinzufügen möchten, in Ihrer ersten Option wird es überlappende #down Container direkt unter Ihrer Kopfzeile platziert werden. In der zweiten Option wird es dort platziert, wo Sie es haben möchten.

Answer 2

Eine Möglichkeit, den Raum zu füllen, wäre 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>