Kann nicht scrollen, wenn untergeordnete Höhe: 100% und Überlauf: ausgeblendet

Ich versuche, eine responsive Webseite zu erstellen. Ich habe ein Header-Div, das ist 60px, und eine Landung div direkt darunter, die ich den Rest des Bildschirms aufnehmen möchte (Höhe 100%). However, it overflows. Ich kann nicht Überlauf verwenden: versteckt, denn wenn ich die Ansicht vergrößern, I can't scroll down anymore.Kann nicht scrollen, wenn untergeordnete Höhe: 100% und Überlauf: ausgeblendet

**************CSS*************** 

#home{ 
    margin: 0; 
    height: 100%; 
    min-height: 100%; 
    width: 100%; 
} 

.header { 
    width: 100%; 
    height: 60px;  
    background-color: none; 
} 

.landing{ 
    margin: 0 auto; 
    height: auto; 
    min-height: 100%; 
    width: 100%; 
    background-color: yellow; 
} 


*************HTML************* 

<div id="home"> 
    <div class="header"></div> 
    <div class="landing"></div> 
</div>

Wie behebe ich damit meine Zielseite nicht überläuft?

Quelle

2017-05-08 J. Doe

Verwendung calc:

.landing { 
    min-height: calc(100%-60px;); 
    [...etc...] 
}

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
#home { 
 
    margin: 0; 
 
    height: 100%; 
 
    height: 100%; 
 
    min-width: 100%; 
 
} 
 

 
.header { 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: blue; 
 
} 
 

 
.landing { 
 
    margin: 0 auto; 
 
    height: auto; 
 
    min-height: calc(100% - 60px); 
 
    min-width: 100%; 
 
    background-color: yellow; 
 
}

<div id="home"> 
 
    <div class="header"></div> 
 
    <div class="landing"></div> 
 
</div>

Quelle

2017-05-08 23:55:33 Johannes

Ich habe versucht, fügte hinzu, dass unter .landing und Es schien nicht zu funktionieren –

Sie müssen auch den Körper und die HTML-Höhe auf 100% setzen, um eine Höhenreferenz für das '# home'element zu haben - siehe das Snippet, das ich meiner Antwort hinzugefügt habe. – Johannes

Anscheinend brauchen Sie Leerraum für "-". Vielen Dank! –

hier ist ein voll funktionierendes Beispiel für eine Seite mit einem 60px hoch Header, mit dem Rest der Seite von einem div gefüllt. Es verwendet flexbox (display: flex), ich habe ein paar Dinge aus einer Antwort here geändert. Sie können ein müssen ein paar Dinge ändern (Klassen, IDs etc.), um es für Sie zu arbeiten, aber dies sollte funktionieren:

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
    <style media="screen"> 
 
    html,body { 
 
     height: 100%; 
 
     margin: 0 
 
    } 
 

 
    .box { 
 
     display: flex; 
 
     flex-flow: column; 
 
     height: 100%; 
 
    } 
 

 
    .box .row { 
 
     border: 1px dotted grey; 
 
    } 
 

 
    .box .row.header { 
 
     flex: 0 1 60px; 
 
    } 
 

 
    .box .row.content { 
 
     flex: 1 1 auto; 
 
     background-color: yellow; 
 
    } 
 

 
    </style> 
 
    </head> 
 
    <body> 
 
    <div class="box"> 
 
     <div class="row header"> 
 
     <p><b>header (60 px tall)</b> 
 
     </div> 
 
     <div class="row content"> 
 
     <p> 
 
      <b>content</b> 
 
      (fills remaining space) 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

Quelle

2017-05-09 00:08:23 Slam

Kann nicht scrollen, wenn untergeordnete Höhe: 100% und Überlauf: ausgeblendet

Antwort

Verwandte Themen