計算使用CSS計算（）

我需要.content DIV使用所有可用空間計算使用CSS計算（）

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

.content { 
    height: 100%; 
} 

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

因爲我不知道.nav的高度，我不能使用height: calc(100%-Xpx) 剩下的高度有沒有其他的如何讓.content使用頁面的剩餘高度？

感謝

來源

2017-05-24 handsome

使用min-height: 100vh上body，然後父（body在這種情況下）設置爲display: flex; flex-direction: column和使用flex-grow: 1上.content它使用的可用空間。

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>

來源

2017-05-24 21:51:33

計算使用CSS計算（）

回答

相關問題