使子元素可滚动并填充父级的高度

Question

在web.telegram.com网络应用程序中，大多数元素都是固定的，除了联系人列表和聊天区域（它可以滚动并填充其父级）。

现在，我想用Bootstrap实现这种行为。我的应用程序有一个固定的导航栏和一个固定容器，它将容纳整个应用程序。该应用程序有多个选项卡。所以我将标签按钮固定在固定容器的顶部。最后，有一个元素可以保留标签本身。

您可以在此处查看：http://www.bootply.com/3bO0UL9OHi

但是，某些标签页将包含header和footer的面板。我想将它们固定到选项卡容器的顶部和底部，并使panel-body：填充剩余区域并可滚动。就像上面电报截图中的聊天区一样。

怎么可以这样做？ （使用bootstrap，css或jquery）。

Answer 1

我找到了一个使用jQuery的解决方法。它不是最好的解决方案，但至少可以起作用。

$(window).resize(function() {
  $('#text-panel').parents().css('height', '100%');
  $('#text-panel').parents().css('overflow-y', 'hidden');
  // fix .fixed-container height. because it has `top: 70px;`.
  $('.fixed-container').css('height', $('.fixed-container').parent().outerHeight() - 70);
  // fix #main-tabs-panes height. because it should not have 100% of its parent.
  // the right value is: parent height - tabs-header height.
  $('#main-tabs-panes').css('height', $('#main-tabs-panes').parent().outerHeight() - $('#tabs-header').outerHeight());
  // now we set the height of our element.
  // it should be: parent height - panel header - panel footer - 20px.
  // because the panel has `margin-bottom: 20px`
  $('#text-panel').css('height', $('#text-panel').parent().outerHeight(true) - (20 + $('#text-panel').prev().outerHeight(true) + $('#text-panel').next().outerHeight(true)));
  $('#text-panel').css('overflow-y', 'auto');
});
$(window).resize();

所以一般按照以下步骤操作：

1. 设置所有家长＆＃39;高度为＆＃39; 100％＆＃39;。
2. 使用以下其中一项修复任何父级：（top，bottom，margin-top或margin-bottom）。减去它们的价值。
3. 隐藏所有overflow-y。
4. 设置元素的高度。在我的情况下，它应该是:(父母身高减去所有其他兄弟姐妹）。
5. 设置overflow-y: auto。

Here is an updated version（bootply）