Machen Sie den gesamten Inhalt scrollbar mit einer festen Fußzeile variabler Höhe

Question

Ich habe eine feste Fußzeile in meiner Anwendung. Wenn Inhalte größer als die Höhe des Bildschirms werden, wird eine Bildlaufleiste hinzugefügt. Aber ich bin nicht in der Lage, das Ende des Inhalts zu sehen, weil es direkt unterhalb der Fußzeile liegt und die Fußzeile fixiert ist, lässt mich nicht darüber scrollen oder es sehen.
Bitte beachten Sie: Höhe der Fußzeile ist eigentlich nicht bekannt und ich habe andere feste divs, die oberhalb der Fußzeile Laufzeit erstellt werden. Der Inhalt sollte also über alle festen Divs im unteren Bereich scrollbar sein.

JS Geige für das gleiche: https://jsfiddle.net/wfck8y8n/

Der folgende Code in der Geige wegen der festen Fußzeile versteckt wird.

<div>I might get hidden because of footer</div> 

Wie kann man dies mit nur CSS sichtbar machen?

Answer 1

Legen Sie den gesamten Inhalt in den Inhaltswrapper und definieren Sie die Höhe als 80vh (da die Fußzeile 20vh ist).

body { 
 
    padding: 0; 
 
} 
 

 
#footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    background-color: black; 
 
    color: white; 
 
    width: 100%; 
 
    height: 20vh; 
 
} 
 

 
.content { 
 
    height: 80vh; 
 
} 
 

 
.content div { 
 
    min-height: 120px; 
 
}

<div class="content"> 
 
    <div>Content</div> 
 
    <div>Content</div> 
 
    <div>Content</div> 
 
    <div>Content</div> 
 
    <div>Content</div> 
 
    <div>I might get hidden because of footer</div> 
 
    <div>I might get hidden because of footer</div> 
 
    <div>I might get hidden because of footer</div> 
 
</div> 
 

 
<div id="footer"> 
 
    I am footer 
 

 
</div>

Answer 2

Was Sie brauchen, ist die Fußzeile zu drücken, da der Inhalt größer wächst:

html, body { 
 
    height: 100%; 
 
} 
 
.wrapper { 
 
    min-height: 100%; 
 
    height: auto !important; 
 
    height: 100%; 
 
    margin: 0 auto -20vh; /*the bottom margin = -(footer's height)*/ 
 
} 
 
.push, #footer { 
 
    height: 20vh; 
 
} 
 
#footer { 
 
    position : fixed; 
 
    bottom : 0; 
 
    background-color : black; 
 
    color : white; 
 
    width : 100%; 
 
} 
 
.content div{ 
 
    min-height: 120px; 
 
}

<div class="wrapper"> 
 
    <div class="content"> 
 
    <div>Content</div> 
 
    <div>Content</div> 
 
    <div>Content</div> 
 
    <div>Content</div> 
 
    <div>Content</div> 
 
    </div> 
 
    <div>I might get hidden because of footer</div> 
 
    <div>I might get hidden because of footer</div> 
 
    <div>I might get hidden because of footer</div> 
 

 
    <div class="push"></div> 
 

 
</div> 
 

 
<div id = "footer"> 
 
    I am footer 
 
</div>

Answer 3

hinzufügen margin-bottom: 60vh Eigenschaft in Körper.

body{margin-bottom:60vh;} 

Also bitte unten Probe entnehmen:

Fiddle

Answer 4

Ich denke, der einfachste Weg, dies zu erreichen, durch das Einwickeln in ein div alle Abschnitte mit Ausnahme der Fußzeile sein könnte, und dann hinzufügen, dass wrapper eine Regel, die in Pixel die Höhe der Fußzeile entspricht.

Ich habe einen Codepen demo gemacht, ich hoffe es hilft.