限制DIV高度與溢出：通過家長滾動使用溢出：隱藏

我有以下的CSS問題：限制DIV高度與溢出：通過家長滾動使用溢出：隱藏

.outer{ 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.inner{ 
 
    overflow-y: scroll; 
 
}

<div id="outer"> 
 
    <div>some dynamic content with unknown height</div> 
 
    <div id="inner"> 
 
    some dynamic content with unknown height 
 
    </div> 
 
    </div>

所以我想外層的div以適合窗口的高度，但我的內部div應該是可滾動的。問題是，我不能給內部div一個固定的高度值，因爲它充滿了動態內容。溢出 - 滾動顯然需要一個高度值才能工作，這是我無法提供的。我對內部div的高度唯一的（理論上的）限制是外部div。我不能使用相對於父母身高的身高，因爲我不知道以前出現過的div的高度。

來源

2017-01-23 Heady

內的div需要一個高度的滾動窗口將是，而不是內容。否則，不需要首先滾動！嘗試100％ –

是的，我不知道滾動窗口的高度。我在滾動窗口之前有一些動態內容，我希望滾動窗口適合其父項的其餘部分 – Heady

您希望'＃inner'獲取剩餘高度，並且如果上面div中的動態內容足夠高，它將會向下推'＃inner'使其不可見？ – Marvin

您可以使用flexbox來解決

注意，我改變了id到class，以配合您的CSS規則

html, body { 
 
    margin: 0; 
 
} 
 
.outer { 
 
    height: 100vh; 
 
    overflow: hidden; 
 
    display: flex; 
 
    flex-direction: column; 
 
    background: lightgray; 
 
} 
 
.inner { 
 
    flex: 1; 
 
    overflow-y: scroll; 
 
    background: lightgreen; 
 
}

<div class="outer"> 
 
    <div> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    </div> 
 
    <div class="inner"> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    </div> 
 
</div>

來源

2017-01-23 19:34:00 LGSon

工作。我以前使用角度材質「列」試過它，但它不起作用，因爲內部div會「緊縮」它的內容。但使用自定義flex，就像您使用的那樣，它可以工作。謝謝。 – Heady

限制DIV高度與溢出：通過家長滾動使用溢出：隱藏

回答

相關問題