berechnen verbleibende Höhe mit CSS calc()

Ich brauche die .content div alle verfügbaren Speicherplatz verwendenberechnen verbleibende Höhe mit CSS calc()

body { 
    height: 100%; 
} 
.nav { 
    padding: 20px; 
} 

.content { 
    height: 100%; 
} 

<body> 
    <div class="nav">nav</div> 
    <div class="content">content</div> 
</body>

Da ich weiß nicht, die Höhe des .nav ich nicht height: calc(100%-Xpx) verwenden können gibt es eine andere Möglichkeit, .content die verbleibende Höhe der Seite zu verwenden?

Dank

Quelle

2017-05-24 handsome

Verwenden min-height: 100vh auf body und dann die Eltern (body in diesem Fall) zu display: flex; flex-direction: column und flex-grow: 1 auf .content verwendet für den verfügbaren Raum zu nutzen.

body { 
 
    min-height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin: 0; 
 
} 
 
.nav { 
 
    padding: 20px; 
 
} 
 

 
.content { 
 
    flex-grow: 1; 
 
    background: #eee; 
 
}

<div class="nav">nav</div> 
 
<div class="content">content</div>

Quelle

2017-05-24 21:51:33

berechnen verbleibende Höhe mit CSS calc()

Antwort

Verwandte Themen