Question

我有一个div，它将使用jQuery对话框功能在弹出窗口中显示。 div包含头部信息的子div和身体信息的第二个div。

我希望body div可以滚动，所以如果正文内容的大小扩展到对话框之外，则可以通过滚动来查看。

我通过将body div的高度设置为100％来实现这一点，并且通过绝对定位我将底部，左侧和右侧设置为0px。问题是，身体div将显示在标题div的顶部，因为我还没有设置顶部位置。我不知道标题div的高度。有没有什么办法可以解决这个问题，所以body div会显示在标题div下面而不必指定/知道它的高度？

以下是一个jsfiddle示例和html标记：。

jsfiddle example

<div>
  <div id="popup" style="width:200px;height:200px;position:absolute; z-index:999; background-color:blue">
    <div id="header" >
      controls<br />
      controls<br />
      controls<br />
    </div>
    <div id="body" style="height:100%;overflow-y:auto;position:absolute;bottom:0px;left:0px;right:0px;">
      results<br />
      results<br />
      results<br />
      results<br />
      results<br />
      results<br />
      results<br />
      results<br />
      results<br />
      results<br />
      results<br />
      results<br />
      results<br />
    </div>
  </div>
</div>

Answer 1

Flexbox救援！

从#body删除所有样式，overflow-y: auto除外（您希望元素遵循普通文档流程，位于弹出窗口内）。
将display: flex和flex-direction: column添加到#popup（因为它是一个灵活的容器）。
将flex: 1添加到#body（根据需要将其展开）。

#popup
{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    /* just for readability: */
    color: #FFF;
    /* and all your previous styles */
    width: 200px;
    height: 200px;
    position: absolute;
    z-index: 999;
    background-color: blue;
}
#body
{
    -webkit-flex: 1;
    flex: 1;
    overflow-y: auto;
}

<div id="popup">
  <div id="header" >
    controls<br />
    controls<br />
    controls<br />
  </div>
  <div id="body">
    results<br />
    results<br />
    results<br />
    results<br />
    results<br />
    results<br />
    results<br />
    results<br />
    results<br />
    results<br />
    results<br />
    results<br />
    results<br />
  </div>
</div>

请注意，这可能不适用于某些过时的浏览器，如they lack flexbox support，但它应该可以正常使用我认为最新的浏览器。

Answer 2

在div的css中尝试添加自己的高度，如100px而不是％，然后比overflow-y：auto;应该工作

Answer 3

如果必须将高度作为变量，为什么不使用viewport或px将父弹出div设置为某个宽度和高度。然后将子元素显示为块，然后使用％将其宽度设置为100（将从父div计算出来）？这将确保它们占据父div的整个宽度，但是以垂直方式顺序显示。然后只需设置overflow：auto;，或者如Derby所提到的，overflow-y：auto。

Answer 4

你可以用jQuery试试这个：

$(document).ready(function(){
    i= $("#header").height();
  n = $("#body").height();
  $("#body").height(n-i);
});

小提琴：https://jsfiddle.net/wravqopx/4/

在div

4 个答案: