CSS Höhe nicht funktioniert wenn der Körper hat min-height

Habe ich nicht bekommen, mein erstes Kind in der body auf 100% Höhe, wenn der Körper min-height angegeben.

<html>
    <head>
        <style>
            html {
                height:100%;
            }
            body {
                min-height:100%;
            }
            #wrapper {
                height:100%;
                min-width:1120px; /* 250px each side (content width is 870px) */
                max-width:2000px;
                background-image:url(bg.png);
                background-position:50% 25px;
                background-repeat:no-repeat;
                background-size:cover;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <!-- web content -->
        </div>
    </body>
</html>

Bedeutet dies nicht die Größe des wrapper um die Höhe des Fensters. Wenn ich entfernen Sie die min- und verwenden height, dann funktioniert es. Aber ich haben den Inhalt der Höhe variabel...

Ich habe einige andere Beiträge hier auf SO und auf google, aber Sie haben nur Fragen und keine Lösung.

InformationsquelleAutor Julian F. Weinert | 2013-12-19

  1. 22

    Wenn Sie einen Prozentwert für height, es wird immer relativ zum angegebenen height des übergeordneten Elements. Nicht die tatsächliche Höhe des parent-Elements, aber die height angegeben in CSS.

    Also, wenn Ihr body element hat keine height angegeben (nur min-height, aber das zählt nicht), die 100% wird nicht in der Lage sein, um wirksam zu werden.

    Eine mögliche Lösung ist die Verwendung position: absolute; top: 0; bottom: 0; auf Ihre #wrapper, und Ihre div gestreckt werden. Natürlich könnten einige layout Folgen, die Sie nicht wollen.

    jsFiddle Demo

    Ich habe schon befürchtet, dass der Tat 🙁 ich bin versucht zu haben, meine #wrapper nach unten gehen unter jeden Umständen. Also, wenn der Inhalt kleiner ist, es muss 100% von html, sonst muss es so hoch sein wie der Inhalt. Und das funktioniert nicht mit position:absolute. Traurig es zu sein scheint unerreichbar. Aber vielen Dank. Andere Ideen sind noch immer geschätzt 😉
    Ich habe eine Lösung... die ich eigentlich schon hatte, also ich kann mich nicht erinnern, warum ich es geändert
    Nochmals vielen DANK für deine tolle Erklärung!
    Nun, wenn man overflow: auto auf Ihre absolute positioniert den wrapper, wird es sicherlich look fine. Ich weiß nicht genau, welche speziellen Anforderungen werden aber. Aber hm... willst du nicht min-height auf Ihre #wrapper - element anstelle von body wenn ich es richtig?
    Jep - Recht. Aber der Körper selbst war nicht groß genug und irgendwie war es alles vermasselt

    InformationsquelleAutor kapa

  2. 10

    Kurze Antwort

    Verwenden height:100vh; für divs, die Sie wollen, zu dehnen und füllen den Bildschirm.

    Nicht Körper ist height: 100%; Es wird brechen Ihre gesamte Website, wenn Sie haben Seiten, die mehr als 100% im content-Höhe. Sie werden nicht in der Lage, um zu Blättern.

    Lange Antwort

    Wenn Sie möchten, ein paar Seiten Ihrer website zu füllen den gesamten Bildschirm, während immer noch so dass andere Seiten zu scrollen (weil Sie mehr als 100% der Höhe in den Inhalten), die Sie benötigen, um die div-Höhe bis zu 100%, nicht die gesamte Website-Breite Körpergröße.

    Verwenden Sie diese als Allgemeine Website-weit css:

    html {
    height: 100%;
}

body {
    min-height: 100%;
}

    Dann spezifische divs zu füllen den gesamten Bildschirm (wenn Sie weniger als 100% height im content):

    /* Set any div heights to 100% of the screen height*/
.div {
    height:100vh;
}

    Erklärung der vh-Messung: https://stackoverflow.com/a/16837667/4975772

    Das meinen Tag gerettet
    Dies ist die einzig richtige Antwort!.. Gestimmt+, danke...
    Sorry, aber ... Nein ? Auf dem mobilen Gerät die oben url-Leiste wird nicht berücksichtigt bei der Berechnung des Viewports (vh), so dass ein Blättern erscheint mit dieser Technik
    Leider war dies eine absichtliche Entscheidung der Entwickler (stackoverflow.com/a/37113430/4975772) zu geben Versuchen, eine wirklich Vollbild-Erfahrung auf mobile erfordert viel mehr Aufwand, als nur diese eine css-Einstellung. Dieser Artikel sieht hilfreich, wenn das, was Sie für gehen. developers.google.com/web/fundamentals/native-hardware/...

    InformationsquelleAutor joshuakcockrell

  3. 5

    Ich tatsächlich eine Lösung gefunden!

    Nun habe ich:

    html, body {
    height:100%;
}

    Also mein Körper ist nicht min-height. Ich kann mich nicht erinnern, warum ich es geändert min-height, aber ich hoffe, dass ich nicht Gesicht die Frage, die ich natürlich konfrontiert, vor einiger Zeit...

    Aber Sie erklärte in Ihrer Frage, dass Sie schon wusste, dass es funktioniert mit height :).
    Ich weiß nicht, was da passiert ist, irgendwie hat es alle haben Mist gebaut, aber jetzt funktioniert es - don ' T get it 🙂
    Sowieso, sollten Sie akzeptieren diese Antwort.
    Aber in diesem Fall, Sie können nicht verwenden Sie die PageUp/Down und die Seite immer nach oben scrollen nach reload
    Dies wird brechen die anderen Seiten Ihrer website, wenn Sie mehr als 100% height im content. Meine Antwort erklärt, wie man das beste aus beiden Welten.

    InformationsquelleAutor Julian F. Weinert

Schreibe einen Kommentar