Maximale Höhe funktioniert nicht mit Prozent, wenn sie innerhalb von 'position: fixed' liegt

Question

Ich habe einen Pop-up-Dialog mit einer Liste von Elementen darin. Ich versuche der Liste von Elementen eine max-height relativ zur Gesamthöhe des Bildschirms zu geben.

Nach einigem Experimentieren mit den Stilen scheint es mir, dass es nicht funktioniert, wenn der Pop-up-Dialog eine max-height hat, weil es einen Zyklus in der Berechnung erzeugt: Die Höhe des Pop-up-Dialogs hängt von der Höhe der Liste der Elemente ab, und die max-height der Liste der Elemente hängt von der Höhe des Pop-up-Dialogs ab.

Bitte sehen Sie sich das angehängte Plunkr-Beispiel an: Wenn #popup-container eine max-height von 66% hat, hat die Liste der Elemente (popup-content) keine max-height.

http://plnkr.co/edit/esdIMjvOgJ8hRM8mSk2t?p=preview

Answer 1

Dies scheint den Trick zu machen: Gesamte CSS-Seite:

/* Styles kommen hier hin */

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#popup-container {
  position:fixed;
  max-height: 66%; 
  border: 1px solid black;
  width: 500px;
  bottom: 0;
  right: 0;
  overflow: auto;
}

.popup-footer , .popup-header {
  display: block;
  background: #ccc;
  height: 20px;
  position: fixed;
  width: 480px;
}
.popup-footer{
  position: fixed;
  bottom: 0;
}

Der Footer ist ein bisschen gehackt... ich bin mir noch nicht sicher, wie ich das umgehen soll. Ich habe dem Header/Footer eine Breite gegeben, damit er nicht über die Scrollleiste hinausgeht :S