Dynamische Höhe bis zum Ende des Browsers mit CSS

Question

Ich habe ein Popup-Fenster mit einer Tabelle und darunter ist eine Schaltfläche Speichern. Manchmal hat es ein paar Datensätze in einer Tabelle, oder es hat viele Datensätze, ein anderes Mal.

Ich möchte die Höhe dieses Popup-Fensters dynamisch einstellen, indem ich max-height einstelle. Ein Problem ist manchmal, dass ich den Browser nicht maximal nutze, oder ich benutze andere Browser oder die Auflösung verschiedener Monitore. Damit manchmal bei vielen Datensätzen in der Tabelle das Popup-Fenster in einem Monitor oder manchmal in einem anderen Monitor angezeigt wird, wird die Schaltfläche Speichern unten aufgrund einer langen Tabelle nicht angezeigt.

Anstatt max-height einzustellen, frage ich mich, ob es einige Möglichkeiten gibt, die Höhe dynamisch einzustellen UND die maximale Höhe wird bis zum unteren Rand des Browsers reichen, so dass die Schaltfläche Speichern angezeigt wird, wenn lange Datensätze vorhanden sind.

Unten ist mein CSS-Code.

max-height: 900px; 
overflow-y:auto 

Answer 1

können Sie max-height: 100%; verwenden, solange sein Behälter mit einer Höhe von 100% des body hat:

JS Fiddle

Und wenn Sie die Knöpfe wollen am unteren Rand zeigen, könnten Sie calc() verwenden wie: max-height: calc(100% - 60px); mit 60px, die die Höhe der Schaltfläche darstellen.

JS Fiddle - calc()