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;

父母的父母：

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来解释更改（例如，我必须将容器窗口向下推103px，因为那是我顶部导航栏的高度，等）

容器div的问题在页面大小更改时不会调整大小

1 个答案: