html - 容器 div 的问题不会随着页面大小的变化而调整大小

Question

我正在处理一个问题，其中我的容器元素没有随着页面大小的变化而调整大小，这会导致在较小的屏幕上显示页面时出现问题(例如，内容被隐藏，用户无法向下滚动到足以看到它)。我给了有问题的容器 (section.padder-content.scrollable) 一个比平常小的高度，所以它更容易看到。这是演示问题的图片:

The issue

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

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

它的父级有:

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

和 parent 的 parent :

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 ( Scale from ThemeForest )。这里可能会发生很多我不太了解的交互，因此我们将不胜感激。附带说明:我目前使用的是 IE11，因为虽然我发现了一个针对 Chrome/FF 的 hacky 修复程序，但它完全破坏了 IE 中的显示。

如果我需要提供更多详细信息，请告诉我。

Answer 1

所以我解决了这个问题。有几个相互矛盾的问题。关键问题是我使用的模板(来自 ThemeForest 的 Scale)具有在 IE11 中不能正常工作的 javascript 代码(app.js)。违规代码:

// 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 以说明更改(例如，我必须将容器窗口向下推 103 像素，因为那是顶部导航栏的高度，等等)