Responsive Scrolling div Höhe

Question

Ich habe eine Fußzeile, die behoben ist. Ich habe einen Header, der relativ ist. Zwischen diesen Containern befindet sich der Inhalt, der auf overflow-y: auto gesetzt ist. Das bedeutet, dass die Bildlaufleiste nur in diesem div-Container angezeigt werden soll. Ich habe einen Container um diesen Inhalt div. Die Höhe für dieses div wird auf Pixel gesetzt, da bei Verwendung eines Prozentwerts automatisch 100% erreicht werden und die Bildlaufleiste nicht sichtbar ist. Es sieht perfekt auf 100% ohne die Höhe des Bildschirms zu ändern. Wenn der Benutzer jedoch die Höhe des Bildschirms ändern sollte, kann der Benutzer nicht den gesamten Inhalt im div anzeigen, da die feste Fußzeile dies jetzt abdeckt. Wenn der Benutzer zoomt, befindet sich ein weißer Zwischenraum zwischen der Fußzeile und dem div. Ich möchte es so, dass, wenn der Benutzer zoomt, gibt es keinen Leerraum und wenn der Benutzer die Höhe des Bildschirms ändert, kann der Benutzer den gesamten Inhalt anzeigen.

HTML

<div class="top-container"> 
</div> 
<div class="container"> 
<ul> 
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> 
</ul> 
</div> 
<footer> 

</footer> 

CSS

.top-container { 
position: relative; 
z-index: 6; 
background: #fff; 
padding: 40px 40px 0; 
bottom: 0; 
width: 100% 
} 
.container { 
padding: 10px 0; 
margin: 0 .6%; 
} 
ul { 
padding-top: 2px; 
height: 437px; 
overflow-y: auto; 
overflox-x: hidden; 
} 
footer{ 
background: #fff; 
padding: 20px 50px; 
overflow: hidden; 
position: fixed; 
z-index: 5; 
left: 0; 
bottom: 0; 
width: 100%; 
} 

JSFIddle Diese JSfiddle zeigt nicht genau mein Problem. Die Bildlaufleiste sollte nur im Inhalt und nicht in der Kopfzeile angezeigt werden. Was ist es jetzt?

Dank

Answer 1

.top-container { 
 
    position: relative; 
 
    z-index: 6; 
 
    background: #fff; 
 
    padding: 40px 40px 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    max-height: 60px; 
 
    background: green; 
 
} 
 
.container { 
 
    padding: 10px 0; 
 
    margin: 0 .6%; 
 
    overflow-y: scroll; 
 
    height: calc(100vh - 100px); 
 
    background: blue; 
 
} 
 
ul { 
 
    padding-top: 2px; 
 
    height: 437px; 
 
    overflow-y: auto; 
 
    overflox-x: hidden; 
 
} 
 
footer{ 
 
    background: #fff; 
 
    padding: 20px 50px; 
 
    overflow: hidden; 
 
    position: fixed; 
 
    z-index: 5; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 
body{ 
 
    max-height: 90vh; 
 
    } 
 
footer{ 
 
    background: red; 
 
    max-height: 40px; 
 
}

<div class="top-container"> 
 

 
</div> 
 
<div class="container"> 
 
    <ul> 
 
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> 
 
    </ul> 
 
</div> 
 
<footer> 
 

 
</footer>

Hier wird die jsFiddle aktualisiert

Answer 2

.top-container { 
position: relative; 
z-index: 6; 
background: #fff; 
padding: 40px 40px 0; 
bottom: 0; 
width: 100% 
} 
.container { 
padding: 10px 0; 
margin: 0 .6%; 
} 
ul { 
padding-top: 2px; 
//height: 437px; 
overflow-y: auto; 
overflox-x: hidden; 
} 
footer{ 
background: #fff; 
padding: 20px 50px; 
overflow: hidden; 
z-index: 5; 
width: 100%; 
} 

Ist das, was Sie wollen?