• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

"DIV height 100% Browserhöhe mit CSS

J

Josi

Neues Mitglied
Hallo,

ich versuche gerade ein div an die Browserhöhe mit 100% anzupassen mit CSS. Mithilfe von dem Code aus diesem Thread:

Code: 
html, body {
height: 100%; /* Anzeigebereich in der Vertikalen auf 100% strecken */
}

div#wrapper {
position: relative;
margin: 0 auto;
min-height: 100%; /* Mindesthöhe in modernen Browsern */
height: auto !important; /* !important-Regel für moderne Browser */
height: 100%; /* Mindesthöhe in IE (<7) */
}

Leider funktioniert das nicht. Ich möchte, dass in diesem Template: http://www.templatewire.com/preview/touche/ das Start Div mit dem Hintergrund-Bild sich immer an die Browserhöhe anpasst. (vielleicht kann jmd mit dem Firefox Entwickler-Werkzeug "Element untersuchen) meine Schritte nachverfolgen?)


Ich gebe also der div ID "header" die oben genannten Eigenschaften. Body ist bereits mit height: 100% definiert.

Der header div macht dann, was ich will. Das sehe ich, wenn ich in der div Klasse "header .intro-text" "padding-top: & padding-bottom" auf "0px" stelle (das ist die Klasse für die Überschrift "Touché" und den restlichen Inhalt in der Mitte) und die Hintergrundfarbe von "header" auf "red" setze.

Nun sollen sich aber auch noch die darin enthaltene Divs-CLASSES anpassen (.intro, .overlay, .container).
Dort habe ich ebenfalls den oben genannten Code eingefügt.

Die Divs verändern ihre Größe dann nicht (nehmen die Größe an, die für den Inhalt notwendig ist). Erst wenn ich an padding was verändere, ändert sich auch die Höhe der Divs. Ich kann ihnen nicht mal eine feste Höhe von z.B. "1000px" geben.

Kann mir das jemand erklären?

Ich wäre über Hilfe sehr dankbar, beiße mir gerade die Zähne daran aus... ;-)

Gruß
Josi
 
Josi schrieb:
Hallo,

ich versuche gerade ein div an die Browserhöhe mit 100% anzupassen mit CSS. Mithilfe von dem Code aus diesem Thread:

Code: 
html, body {
height: 100%; /* Anzeigebereich in der Vertikalen auf 100% strecken */
}

div#wrapper {
position: relative;
margin: 0 auto;
min-height: 100%; /* Mindesthöhe in modernen Browsern */
height: auto !important; /* !important-Regel für moderne Browser */
height: 100%; /* Mindesthöhe in IE (<7) */
}

Leider funktioniert das nicht. Ich möchte, dass in diesem Template: http://www.templatewire.com/preview/touche/ das Start Div mit dem Hintergrund-Bild sich immer an die Browserhöhe anpasst. (vielleicht kann jmd mit dem Firefox Entwickler-Werkzeug "Element untersuchen) meine Schritte nachverfolgen?)


Ich gebe also der div ID "header" die oben genannten Eigenschaften. Body ist bereits mit height: 100% definiert.

Der header div macht dann, was ich will. Das sehe ich, wenn ich in der div Klasse "header .intro-text" "padding-top: & padding-bottom" auf "0px" stelle (das ist die Klasse für die Überschrift "Touché" und den restlichen Inhalt in der Mitte) und die Hintergrundfarbe von "header" auf "red" setze.

Nun sollen sich aber auch noch die darin enthaltene Divs-CLASSES anpassen (.intro, .overlay, .container).
Dort habe ich ebenfalls den oben genannten Code eingefügt.

Die Divs verändern ihre Größe dann nicht (nehmen die Größe an, die für den Inhalt notwendig ist). Erst wenn ich an padding was verändere, ändert sich auch die Höhe der Divs. Ich kann ihnen nicht mal eine feste Höhe von z.B. "1000px" geben.

Kann mir das jemand erklären?

Ich wäre über Hilfe sehr dankbar, beiße mir gerade die Zähne daran aus... ;-)

Gruß
Josi
Zum Vergrößern anklicken....

Habs mir jetzt nicht angesehen aber die komischen Hacks für alte Browser kamnst du dir sowieso sparen.

Code: 
min-height: 100vh;
 
Josi schrieb:
ich versuche gerade ein div an die Browserhöhe mit 100% anzupassen mit CSS. Mithilfe von dem Code aus diesem Thread:

Code: 
html, body {
height: 100%; /* Anzeigebereich in der Vertikalen auf 100% strecken */
}

div#wrapper {
position: relative;
margin: 0 auto;
min-height: 100%; /* Mindesthöhe in modernen Browsern */
height: auto !important; /* !important-Regel für moderne Browser */
height: 100%; /* Mindesthöhe in IE (<7) */
}

Leider funktioniert das nicht.
Zum Vergrößern anklicken....
Kann man so nicht sagen / im Raum stehen lassen.
Josi schrieb:
Ich möchte, dass in diesem Template: http://www.templatewire.com/preview/touche/ das Start Div mit dem Hintergrund-Bild sich immer an die Browserhöhe anpasst. (vielleicht kann jmd mit dem Firefox Entwickler-Werkzeug "Element untersuchen) meine Schritte nachverfolgen?)


Ich gebe also der div ID "header" die oben genannten Eigenschaften. Body ist bereits mit height: 100% definiert.

Der header div macht dann, was ich will. Das sehe ich, wenn ich in der div Klasse "header .intro-text" "padding-top: & padding-bottom" auf "0px" stelle (das ist die Klasse für die Überschrift "Touché" und den restlichen Inhalt in der Mitte) und die Hintergrundfarbe von "header" auf "red" setze.

Nun sollen sich aber auch noch die darin enthaltene Divs-CLASSES anpassen (.intro, .overlay, .container).
Dort habe ich ebenfalls den oben genannten Code eingefügt.

Die Divs verändern ihre Größe dann nicht (nehmen die Größe an, die für den Inhalt notwendig ist). Erst wenn ich an padding was verändere, ändert sich auch die Höhe der Divs. Ich kann ihnen nicht mal eine feste Höhe von z.B. "1000px" geben.

Kann mir das jemand erklären?

Ich wäre über Hilfe sehr dankbar, beiße mir gerade die Zähne daran aus... ;-)
Zum Vergrößern anklicken....
Die Nachfolgeelemente (.intro, .overlay, .container) eines vertikal gestreckten Elternelements können nicht erfolgreich auf dieselbe Weise behandelt werden.

Hierzu bedarf es anderer Methoden, Techniken: Zum Beispiel Flexbox (display:flex in Kombination mit align-items:stretch).
 
Spicelab schrieb:
Kann man so nicht sagen / im Raum stehen lassen.
Die Nachfolgeelemente (.intro, .overlay, .container) eines vertikal gestreckten Elternelements können nicht erfolgreich auf dieselbe Weise behandelt werden.

Hierzu bedarf es anderer Methoden, Techniken: Zum Beispiel Flexbox (display:flex in Kombination mit align-items:stretch).
Zum Vergrößern anklicken....

Wow! Danke Spicelab! Wieder was gelernt. Flexbox ist ja genial.

edit: jetzt klappt alles.

Noch eine Frage...

Funktioniert "display: flex;" mit allen Browsern oder muss ich andere Schreibweisen für ältere Browser verwenden?



Hier mein alter Beitrag, habe aber einen dummen Fehler gemacht, also muss folgender Abschnitt nicht gelesen werden:
----

Es funktioniert jetzt soweit, zumindest in Firefox. Ohne mich jetzt bis zum Schluss eingelesen zu haben, habe ich noch eine Frage... Es funktioniert nämlich nicht in Safari 10.1, zumindest nicht die Zentrierung des Logos (in dem Beispiel "Touché" - vertikal & horizontal) mit "align-items: center;" und "justify-content: center;". Brauche ich für alte Browser andere Befehle für die Flexbox? Habe mal testweise "-webkit-align-items: center;" und "-webkit-justify-content: center;" verwendet, aber ohne Erfolg.

// edit: oh man ich habe es jetzt. anscheinend nimmt die div-Klasse "row" in Safari nicht die 100% Höhe an, wenn ich die Klasse "container" nicht auch mit den flex-Eigenschaften definiere... Da dieser sich dann nicht an die 100%-Höhe anpasst und somit "row" auch nicht größer sein kann als das Elternelement "container". Anscheinend konnte Firefox das vereiteln, Safari aber nicht.

Also wenn ich auch noch "header .container" mit "
display: flex;
display: -webkit-flex;
width: 100%;
padding: 0;
flex: 1;
margin: 0;" definiere, klappts.

edit Ende. //

Ist es besser, ich pflege das ganze mal in Fiddle ein? Kannte das Instrument vorher nicht, sieht interessant aus. Wäre ein Ersatz für das "Arbeiten" im Firefox Entwickler-Modus, oder?

"margin: auto;" funktionert auch nicht.

Code: 
header {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100%;
    }


.intro {
display: flex;
display: -webkit-flex;
width: 100%;
padding: 0;
flex: 1;
margin: 0;
}

.intro .overlay {
display: flex;
display: -webkit-flex;
width: 100%;
padding: 0;
flex: 1;
margin: 0;
}

.intro .row {
display: flex;
display: -webkit-flex;
width: 100%;
padding: 0;
flex: 1;
height: 100%;
margin: 0;
align-items: center;
-webkit-align-items: center;
}

header .intro-text {
display: flex;
display: -webkit-flex;
width: 100%;
padding: 0;
flex: 1;
justify-content: center;
 -webkit-justify-content: center;
}
 
Zuletzt bearbeitet:
Als Windows-User kann ich zum (Fehl)Verhalten von Safari leider nichts handfestes beisteuern, außer:
  • http://caniuse.com/#search=justify-content
  • http://caniuse.com/#search=align-items
  • Known issues:
    • Safari 10 and below uses min/max width/height declarations for actually rendering the size of flex items, but it ignores those values when calculating how many items should be on a single line of a multi-line flex container. Instead, it simply uses the item's flex-basis value, or its width if the flex basis is set to auto. see bug. Fixed in all versions > 10.
    • ...
    • In Safari, the height of (non flex) children are not recognized in percentages. However other browsers recognize and scale the children based on percentage heights. (See bug) The bug also appeared in Chrome but was fixed in Chrome 51
    • ...
    Zum Vergrößern anklicken....
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben