Question

首先，小提琴：

我无法对齐内部div以占据容器的其余高度。正如你在小提琴中看到的那样，div＆＃34;整体＆＃34;有一个标题附在它上面，下面是一个＆＃34;内容＆＃34; DIV。这个＆＃34;整体＆＃34; div正在溢出＆＃34;内容＆＃34;高度为100％的div，而不是抓住其父级＆＃34;内容＆＃34;的高度，它抓住整个视口的高度。

<div class="whole">
     <div class="left">
     </div>
     <div class="right">
     </div>
</div>

此容器应正确装入

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

原因基本上有两个div，＆＃34; chrome＆＃34;和＆＃34;内容＆＃34;，保持左右div，这是一个反应应用程序和＆＃34; chrome＆＃34;是另一个组件返回的div包装器。

如果我添加溢出：隐藏到＆＃34; chrome＆＃34; div，它似乎解决了我的问题。但是，因为高度仍然太高，但仅仅是看不见的，正确的＆＃34; div，包含一堆打算滚动的资产，当你通过滚动条到达div的末尾时会中断，但它会被切断。

此示例： https://jsfiddle.net/gy1kpxwk/3

所以，基本上我都在问，是否有人知道如何制作这样的＆＃34;整体＆＃34; div没有突破其父母，＆＃34;内容＆＃34; div，并正确填充未被标题占用的剩余空间？

tl; dr make容器正确填充其余的父容器，而不是破坏溢出-y：滚动

Answer 1

如果有人想知道，使用很多弹性盒解决了我的问题。

这是reddit的/ u / bonhone的解决方案： http://codepen.io/anon/pen/gpjReQ

  display: flex;
  flex-grow: 1;

是我使用的神奇css线。：）

Div溢出容器div高度：100％，溢出：隐藏中断滚动y

1 个答案: