Breite/Höhe als Prozentsatz minus Pixel einstellen

Question

Ich versuche, einige wiederverwendbare CSS-Klassen für mehr Konsistenz und weniger Unordnung auf meiner Website zu erstellen, und ich stecke fest, wenn ich versuche, eine Sache zu standardisieren, die ich häufig verwende.

Ich habe einen Container <div> für die ich die Höhe nicht festlegen möchte (da sie je nach Position auf der Website variiert), und darin befindet sich eine Kopfzeile <div> und dann eine unsortierte Liste von Elementen, die alle mit CSS versehen sind.

Es sieht in etwa so aus:

Ich möchte die unsortierte Liste um den verbleibenden Platz im Container auszunutzen <div> mit dem Wissen, dass die Kopfzeile <div> es 18px groß. Ich weiß nur nicht, wie ich die Höhe der Liste als "das Ergebnis von 100% minus 18px ".

Ich habe gesehen, dass diese Frage in ein paar anderen Zusammenhängen auf SO gestellt wurde, aber ich dachte, dass es sich lohnt, sie für meinen speziellen Fall erneut zu stellen. Hat jemand einen Rat in dieser Situation?

Answer 1

Sie können verwenden calc :

height: calc(100% - 18px);

Beachten Sie, dass einige alte Browser die CSS3-Unterstützung nicht unterstützen. calc() Funktion, so dass die Implementierung der herstellerspezifischen Versionen der Funktion erforderlich sein kann:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

Answer 2

Für eine etwas andere Herangehensweise könnten Sie etwas wie dieses auf der Liste verwenden:

position: absolute;
top: 18px;
bottom: 0px;
width: 100%;

Dies funktioniert, solange der übergeordnete Container über position: relative;

Answer 3

Ich verwende Jquery für diese Aufgabe

function setSizes() {
   var containerHeight = $("#listContainer").height();
   $("#myList").height(containerHeight - 18);
}

dann binde ich die Fenstergröße so, dass sie bei jeder Größenänderung des Browserfensters neu berechnet wird (wenn sich die Größe des Containers mit der Größenänderung des Fensters ändert)

$(window).resize(function() { setSizes(); });

Answer 4

Definieren Sie die Höhe nicht in Prozent, sondern setzen Sie einfach den top=0 y bottom=0 etwa so:

#div {
   top: 0; bottom: 0;
   position: absolute;
   width: 100%;
}

Answer 5

Vorausgesetzt 17px Kopfhöhe

Liste css:

height: 100%;
padding-top: 17px;

Kopfzeile css:

height: 17px;
float: left;
width: 100%;