Ich versuche, einige wiederverwendbare CSS-Klassen für mehr Konsistenz und weniger Unordnung auf meiner Website zu erstellen, und ich versuche nicht, eine Sache zu standardisieren, die ich häufig verwende.
Ich habe einen Container <div>
, für den ich die Höhe nicht festlegen möchte (da er je nach Standort auf der Site unterschiedlich ist). Darin befindet sich eine Kopfzeile <div>
und dann eine ungeordnete Liste von Elementen, auf die CSS angewendet wird Sie.
Es sieht sehr ähnlich aus:
Ich mag , dass die ungeordnete Liste den verbleibenden Raum in dem Behälter nehmen <div>
, wohl wissend , dass der Header <div>
ist 18px
groß. Ich weiß nur nicht, wie ich die Höhe der Liste als "Ergebnis von 100%
Minus 18px
" angeben soll .
Ich habe diese Frage in einigen anderen Kontexten zu SO gesehen, aber ich dachte, es lohnt sich, sie für meinen speziellen Fall erneut zu stellen. Hat jemand einen Rat in dieser Situation?
Antworten:
Mir ist klar, dass dies ein alter Beitrag ist, aber da er nicht vorgeschlagen wurde, ist es erwähnenswert, dass Sie Folgendes verwenden können, wenn Sie für CSS3-kompatible Browser schreiben
calc
:Es ist zu beachten, dass derzeit nicht alle Browser die Standardfunktion CSS3 calc () unterstützen. Daher kann die Implementierung der browserspezifischen Versionen der Funktion wie folgt erforderlich sein:
quelle
lessc --strict-math=on
, um den Ausdruck innerhalb voncalc
- nur ein Problem, mit dem ich konfrontiert war und das ich viel Zeit verbrachte (ab Less 2.0.0)100%-18px
,100%- 18px
und100% -18px
ging nicht in den Browsern ich getestet.Für einen etwas anderen Ansatz könnten Sie so etwas in der Liste verwenden:
Dies funktioniert so lange wie der übergeordnete Container
position: relative;
quelle
position: relative;
stolperte über mich.absolute
im Kindercontainer sein, kann es nicht seinrelative
.absolute
sein) und muss ebenfalls auf 100% Höhe eingestellt werden.Ich benutze dafür Jquery
dann binde ich die Fenstergröße, um sie neu zu berechnen, wenn die Größe des Browserfensters geändert wird (wenn sich die Größe des Containers mit der Größe des Fensters ändert)
quelle
Definieren Sie die Höhe nicht als Prozent, sondern stellen Sie einfach das
top=0
undbottom=0
wie folgt ein:quelle
height:100%
und eingestellt sinddisplay:block
. Sonst wäre es eine sehr elegante Lösung. Interessanterweisemargin:auto
kann ein Objekt mit fester Breite auch nicht vertikal zentriert werden, obwohl es horizontal einwandfrei funktioniert.Vorausgesetzte 17px-Headerhöhe
Liste CSS:
Header CSS:
quelle
ul { margin-top: -17px; }
overflow:hidden;
auf dem enthaltenden Elementoverflow:auto;
das gewünschte Element ein.Es hat bei mir funktioniert!
quelle
calc()
zur Laufzeit zentrieren. In vielen Fällen sollte dies jedoch kein Problem sein. Beachten Sie außerdem, dass die Verwendung vieler negativer Werte für Ränder, Auffüllungen und Offsets beim späteren Debuggen von Code zu Verwirrung führen kann. Versuchen Sie daher, die Dinge einfach zu halten.Versuchen Sie es mit Box-Sizing. Für die Liste:
Für den Header:
Natürlich sollte der übergeordnete Container Folgendes haben:
quelle
Ein anderer Weg, um das gleiche Ziel zu erreichen: Flexboxen . Machen Sie den Container zu einer Spaltenflexbox, und Sie haben dann die Freiheit, einigen Elementen eine feste Größe (Standardverhalten) zu erlauben oder den Containerraum aufzufüllen / zu verkleinern (mit flex-grow: 1 und flex-). schrumpfen: 1).
Siehe https://jsfiddle.net/2Lmodwxk/ (versuchen Sie, das Fenster zu erweitern oder zu verkleinern, um den Effekt zu bemerken).
Hinweis: Sie können auch die Shorthand-Eigenschaft verwenden:
quelle
Ich habe einige der anderen Antworten ausprobiert, und keine davon hat so funktioniert, wie ich es wollte. Unsere Situation war sehr ähnlich, als wir einen Fensterkopf hatten und die Größe des Fensters mit Bildern im Fensterkörper geändert werden konnte. Wir wollten das Seitenverhältnis der Größenänderung sperren, ohne Berechnungen hinzufügen zu müssen, um die feste Größe des Headers zu berücksichtigen, und das Bild sollte dennoch den Fensterkörper füllen.
Unten habe ich ein sehr einfaches Snippet erstellt, das zeigt, was wir letztendlich gemacht haben. Es scheint für unsere Situation gut zu funktionieren und sollte mit den meisten Browsern kompatibel sein.
Bei unserem Fensterelement haben wir einen 20-Pixel-Rand hinzugefügt, der zur Positionierung relativ zu anderen Elementen auf dem Bildschirm beiträgt, aber nicht zur "Größe" des Fensters beiträgt. Die Fensterüberschrift wird dann absolut positioniert (wodurch sie aus dem Fluss anderer Elemente entfernt wird, sodass andere Elemente wie die ungeordnete Liste nicht verschoben werden), und ihre Oberseite wird mit -20 Pixel positioniert, wodurch die Überschrift innerhalb des Randes platziert wird des Fensters. Schließlich wird unser ul-Element zum Fenster hinzugefügt, und die Höhe kann auf 100% eingestellt werden, wodurch es den Körper des Fensters ausfüllt (ohne den Rand).
quelle
Danke, ich habe meine mit Ihrer Hilfe gelöst und ein wenig optimiert, da ich eine Div 100% Breite 100% Höhe (weniger Höhe einer unteren Leiste) und keine Schriftrolle am Körper (ohne Hack / Verstecken von Schriftrollen) möchte.
Für CSS:
Für HTML:
Das hat den Trick gemacht, oh ja, ich habe einen etwas größeren Wert auf div gesetzt. Angepasst für den unteren als für die untere Balkenhöhe, sonst erscheint die vertikale Bildlaufleiste, ich habe den nächstgelegenen Wert angepasst.
Dieser Unterschied liegt darin, dass eines der Elemente im dynamischen Bereich ein zusätzliches unteres Loch hinzufügt, das ich nicht entfernen kann ... es ist ein Video-Tag (HTML5). Bitte beachten Sie, dass ich dieses Video-Tag mit diesem CSS ( Es gibt also keinen Grund dafür, ein unteres Loch zu machen, aber es tut es):
Das Ziel: Haben Sie ein Video, das 100% des Browers einnimmt (und die Größe dynamisch ändert, wenn die Größe des Browsers geändert wird, ohne das Seitenverhältnis zu ändern), abzüglich eines unteren Bereichs, den ich für ein Div mit einigen Texten, Schaltflächen usw. (und Validatoren) verwende w3c & css natürlich).
EDIT: Ich habe den Grund gefunden, Video-Tag ist wie Text, kein Blockelement, also habe ich es mit diesem CSS behoben:
Beachten Sie das
display:block;
Video-Tag.quelle
Ich bin nicht sicher, ob dies in Ihrer speziellen Situation funktioniert, aber ich habe festgestellt, dass das Auffüllen des inneren Divs den Inhalt innerhalb eines Divs herumschiebt, wenn das enthaltende Div eine feste Größe hat. Sie müssten entweder schweben oder Ihr Header-Element absolut positionieren, aber ansonsten habe ich dies nicht für Divs mit variabler Größe versucht.
quelle