Höhe 100% bricht über Kette

Aus irgendeinem Grund funktioniert die Höhe: 100% nicht über das gesamte Dokument. Es bricht dabei ab und hört auf, 100% seines Elternteils zu übernehmen.Höhe 100% bricht über Kette

Ich habe die folgende Struktur:

<html> 
    <body> 
     <div id="app"> 
      <div data-reactroot> 
       <header class="header"> 
        <nav>...</nav> 
       </header> 
       <main id="main"> 
        <div id="slideshow">...</div> 
        <div id="inner-page">...</div> 
       </main> 
      </div> 
     </div> 
    </body> 
</html>

und die folgenden CSS:

body, html { 
    height: 100%; 
} 

#app, #app>div { 
    height: 100%; 
} 

.header { 
    width: 100%; 
    height: 70px; 
    background-color: #263238; 
} 

#main { 
    width: 100%; 
    height: 100%; 
} 

#slideshow { 
    position: absolute; 
    width: 100%; 
    z-index: -1; 
    padding: 0 !important; 
} 

#inner-page { 
    width: 100%; 
    position: relative; 
    padding: 24px; 
}

Die Höhe richtig bis zum <div data-reactroot> Elemente (einschließlich) geerbt wird, aber bricht am <main> Elemente, und Ich kann nicht herausfinden, warum. Das CSS ist ziemlich einfach und ich kann dem Problem nicht auf den Grund gehen.

Hinweis: ich den Inhalt der Diashow und der inneren Seite der Einfachheit halber weggelassen, wie ich das Niveau der Tiefe glauben, auf die Frage nicht relevant ist (oder bin ich falsch?)

jeder zu schätzen wissen Hilfe bei diesem Puzzle.

Quelle

2016-07-03 user3476096

Sie meinen Höhe der wichtigsten als 100%; – frnt

Da wir alle davon profitieren, zu wissen, welche Antwort eine bestimmte Frage gelöst hat, wäre es großartig, wenn Sie eine Antwort, falls vorhanden, akzeptieren würden, die Ihre Frage löst, oder lassen Sie uns wissen, was fehlt, so dass wir eine finden, die – LGSon

Das Problem war, dass eines der Kinder in der Kette die Höhe 100% durch eine externe Bibliothek (Material-Ui) überschrieben hatte, also Höhe: 100%! behoben. Danke für all Ihre Vorschläge Jungs – user3476096

ich empfehlen die Verwendung von 100vh statt 100% oder wenn Sie 100% haften möchten, wie dieser mehr Wähler hinzu:

html, #app, #app>div, body { 
    height: 100%; 
}

diese

Quelle

2016-07-03 13:32:23 Lucian

Ich habe schon das ... Ich habe meine Frage bearbeitet und hinzugefügt ... es scheint keinen Unterschied zu machen. Ich habe versucht, mit "100vh" und "min-height: 100%" hinzuzufügen. Beide scheinen nicht zu funktionieren ... – user3476096

Es funktioniert bereits, verwende Hintergrund für #app und überprüfe die Ausgabe – Lucian

Machen Sie diese Änderungen in Ihren Codes funktionieren sollte, und wenn Es ist etwa die Höhe von #main dann height:100%; arbeiten nicht als Elemente, die im Inneren sind als absolute positioniert sind.

#app{ 
    width:100%; 
    height: 100%; 
    background:#f22; 
} 

.header { 
    width: 100%; 
    height: 70px; 
    background-color: #263238; 
} 

#main { 
    width: 100%; 
    height: 100vh; 
    background:#ccc; 
}

Quelle

2016-07-03 13:55:44 frnt

Höhe 100% bricht über Kette

Antwort

Verwandte Themen