限制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高度与溢出：通过家长滚动使用溢出：隐藏

回答

相关问题