Question

我有以下CSS问题：

＆＃13;

.outer{
  height: 100%;
  overflow: hidden;
 }

.inner{
  overflow-y: scroll;   
}

＆＃13;

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

＆＃13;

所以我希望外部div适合窗口的高度，但我的内部div应该是可滚动的。问题是，我不能给内部div一个固定的高度值，因为它充满了动态内容。 Overflow-Scroll显然确实需要一个高度值才能工作，这是我无法提供的。我对内部div的唯一（理论上）限制是外部div。我不能使用相对于父母身高的高度，因为我不知道之前的div的高度。

Answer 1

您可以使用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>

使用溢出限制div高度：使用overflow：hidden滚动父级

1 个答案: