随着页面大小的更改，容器div无法调整大小的问题

Question

我正在解决一个问题，即我的容器元素不会随着页面大小的改变而调整大小，这会导致在较小的屏幕上显示页面的问题（例如，内容被隐藏，用户无法向下滚动到足以看到它的程度）。 我给有问题的容器（section.padder-content.scrollable）设置了一个比平常小的高度，因此更容易看到。 这是演示该问题的图像：

问题

左边是调整大小前的屏幕，右边是调整大小后的屏幕-在这里，用户不再能看到“创建”按钮，也不能再向下滚动来查看它。 我想尝试发布我认为是导致此问题的三个元素的源代码的图像，但目前我的声誉不足。 但基本上，有问题的容器具有：

position: absolute;
height: 600px;
overflow-y: auto;

其父级具有：

display: table-cell;
vertical-align: top;
float: none;
position: relative;
border-spacing: 0;

和父母的父母：

height: 100%;
overflow-y: auto;
min-height: 90%;
max-height: 90%;
margin-bottom: 10px;
display: table;
table-layout: fixed;
border-spacing: 0;
width: 100%;

我尝试过试验表格单元的位置，将显示内容更改为几乎所有其他内容，但没有任何东西可以使它正常工作。 我认为这可能与像素高度和百分比的混合有关，但是当我尝试这些时，我似乎会变得更糟。 这不是我的代码，并且使用了三个单独的css文件：site.css，bootstrap.css和app.css（ ThemeForest的Scale ）。 我可能不太了解这里发生的许多互动，因此不胜感激。 附带说明：目前，我正在使用IE11，因为尽管我发现了针对Chrome / FF的漏洞修复程序，但它完全破坏了IE中的显示。

请让我知道是否还有其他详细信息。

Answer 1

所以我解决了这个问题。 有几个相互竞争的问题。 关键问题是我使用的模板（ThemeForest的比例）具有javascript代码（app.js），但在IE11中无法正常工作。 令人反感的代码：

// fix vbox
var fixVbox = function(){
  $('.ie11 .vbox').each(function(){
    $(this).height($(this).parent().height());
  });
  return true;
}
fixVbox();

如果增加窗口大小，则“ vbox”将正确调整大小，但如果减小窗口大小，则不会正确调整大小，这是我在尝试查看网站在移动设备上的工作方式时经常要做的事情。 有些元素的高度是根据其父元素计算得出的，而那些父元素是根据其子元素计算得出的高度...因此，当窗口大小减小时， fixVbox（）函数无法正确计算新的高度，导致所有元素出现问题。

总而言之，这是一个非常具体且难以跟踪的错误-我正在使用的模板本身存在问题。

我的解决方案（对于使用同一模板的其他人）：

在app.js中：

// unmobile
$window.width() < 768 && mobile();
// resize
var $resize;
$window.resize(function() {
  clearTimeout($resize);
  $resize = setTimeout(function(){
    setHeight();
    $window.width() < 767 && mobile();
    $window.width() >= 768 && mobile('reset') && fixVbox();
  }, 500);
});

至：

    $window.width() >= 768 && mobile('reset'); // && fixVbox();

和：

// fix vbox
var fixVbox = function(){
  $('.ie11 .vbox').each(function(){
    $(this).height($(this).parent().height());
  });
  return true;
}
fixVbox();

至：

//fixVbox();

父/子元素开始正确调整大小后，只需修复CSS以解决更改（例如，我必须将容器窗口向下推103px，因为那是我的导航栏在顶部的高度，等等）。