MediaWiki:Timeless.css: Unterschied zwischen den Versionen
Aus Transfusionshandbuch
Die Seite wurde neu angelegt: „→All CSS here will be loaded for users of the Timeless skin: html, body { height: 100%; →Gesamthöhe der Seite nutzen: } #content { min-height: calc(100vh - 150px); →Passt den Inhalt an, um Platz für den Footer zu lassen: } #footer { position: relative; bottom: 0; width: 100%; padding: 10px; }“ |
Keine Bearbeitungszusammenfassung |
||
| (14 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
/* All CSS here will be loaded for users of the Timeless skin */ | /* All CSS here will be loaded for users of the Timeless skin */ | ||
/* HTML- und Body-Bereich verwenden den gesamten Bildschirm */ | |||
html, body { | html, body { | ||
height: 100%; | height: 100%; | ||
display: flex; | |||
flex-direction: column; | |||
margin: 0; | |||
} | } | ||
/* Inhaltsbereich zwischen Kopf- und Fußzeile strecken */ | |||
#content { | #content { | ||
flex: 1; | |||
padding-bottom: 20px; /* Optionaler Abstand für den Footer */ | |||
} | } | ||
/* Footer bleibt unten bei wenig Inhalt */ | |||
#footer { | #footer { | ||
background-color: #f9f9f9; | |||
text-align: center; | |||
padding: 10px; | padding: 10px; | ||
min-height: 50px; /* Mindesthöhe des Footers */ | |||
margin-top: auto; /* Platziert den Footer unten, wenn der Inhalt kurz ist */ | |||
} | } | ||
Aktuelle Version vom 28. Oktober 2024, 14:45 Uhr
/* All CSS here will be loaded for users of the Timeless skin */
/* HTML- und Body-Bereich verwenden den gesamten Bildschirm */
html, body {
height: 100%;
display: flex;
flex-direction: column;
margin: 0;
}
/* Inhaltsbereich zwischen Kopf- und Fußzeile strecken */
#content {
flex: 1;
padding-bottom: 20px; /* Optionaler Abstand für den Footer */
}
/* Footer bleibt unten bei wenig Inhalt */
#footer {
background-color: #f9f9f9;
text-align: center;
padding: 10px;
min-height: 50px; /* Mindesthöhe des Footers */
margin-top: auto; /* Platziert den Footer unten, wenn der Inhalt kurz ist */
}
