2016-05-15 14 views
0

Unten ist ein Screenshot von meinem Fenster Bild nach dem Fenster scrollen screenshotlinker Bereich nimmt nicht die volle Höhe, obwohl Höhe von 100% angegeben wird

Ich habe Höhe von 45px meinen Kopf gegeben und für Hauptteil ist mit biegen. Im Hauptteil habe ich links und rechts. Ich möchte, dass mein linker Bereich die gesamte Bildschirmhöhe einnimmt, wenn ich mein Fenster verkleinere oder maximiere.

So sieht meine Seite beim Scrollen aus. Die linke Platte wird nicht immer mit Scrollen einstellen, obwohl ich Höhen

HTML von 100% gegeben haben

<body> 
    <header></header> 
    <div class="main-section"> 
    <div class="left-section"></div> 
    <div class="right-section"></div> 
    </div> 
</body> 

CSS

body { 
    min-height: 100%; 
    width: 100%; 
    overflow: auto; 
    display: flex; 
    flex-direction: column; 
} 
header { 
    height: 45px; 
    width: 100%; 
    overflow: hidden; 
    display: block; 
} 
.main-section { 
    width: 100%; 
    position: relative; 
    right: 0; 
    left: 0; 
    bottom: 0; 
    flex-grow: 1; 
    overflow: auto; 
} 
.left-section { 
    position: absolute; 
    width: 200px; 
    height: 100%; 
} 
+2

können Sie den vollständigen Code veröffentlichen? – AVI

+0

JokerFan Ich habe den Code eingebettet – Khyati

+2

Der Code, den Sie geteilt haben, ist nicht genug, um den Screenshot zu replizieren ... Was meinst du * "Das linke Panel wird nicht mit Scrollen anpassen" * - Wie sollte es einstellen? Soll es auch beim Scrollen an der gleichen Bildschirmposition bleiben? –

Antwort

0

Problem -

height : 100% 

Er bezieht sich auf die Höhe des Parent-Elements (.main-section) und setzt dann die Höhe des Elements (.left-section) auf 100% davon. Wenn die Höhe des übergeordneten Elements nicht auf irgendwas gesetzt ist, hat der Browser nichts zu tun.

Lösung - Stellen Sie die Höhe des Hauptabschnitts ein, dann wird der linke Abschnitt seine Höhe annehmen.

Hoffe das hilft !!