Firefox ignorieren Min-Höhe in CSS bei der Verwendung von Calc oder Prozentsatz

Question

Ich habe derzeit eine website, wo ich möchte den Hauptteil der Seite und Fußzeile (unter der Kopfzeile Bild und Navigationsleiste) immer die verfügbare Ansicht aufnehmen Raum, aber darunter zu erweitern, wenn es mehr Inhalt gibt. Ich habe min-height meines Containers der Klasse Mainbody auf eine calc() Funktion eingestellt. HTML und CSS wurden in Safari und Chromium getestet und verhalten sich korrekt, es verhält sich jedoch nicht wie beabsichtigt in Firefox. Das Problem ist am deutlichsten auf der Alumni-Seite zu erkennen, die momentan keinen Inhalt hat und auch auf der Medienseite auf einem ausreichend großen Bildschirm erscheint. Gibt es irgendetwas, was ich falsch mache?

Answer 1

100% Höhe bedeutet 100% der Höhe des Inhalts. Um ehrlich zu sein, ich weiß nicht, warum es in Chrom und nicht in Firefox funktioniert.

Was Sie brauchen, ist 100% des Ansichtsfensters. Dafür gibt es coole vw und vh Einheiten. (See availability.).

Wenn Sie min-height zu min-height: calc(100vh - 268px) !important; ändern, wird es funktionieren.

Wenn Sie im alten Stil Lösung möchten, können Sie googlen 100% height css, z. enter link description here

S.S .: Auch fix your CSS.