javascript - 如何使元素随着窗口大小的调整而增长(javascript)

Question

我正在将“Web 应用程序”(即不是“网页”，而是业务线应用程序)从固定大小重写为自由流程。

早些时候，此应用程序被固定在 1024x768 中，但现在我们希望应用程序能够缩放宽度和高度。

在 div 等上设置 width=100% 可以解决宽度问题。但我们遇到了高度问题。

我正在寻找一个 JavaScript 解决方案，它允许我指定某些元素应该填充可见浏览器窗口的其余部分。并且继续在窗口大小调整时执行此操作。

浏览器要求:Internet Explorer 6.0 及更高版本(Firefox 等不是问题)。

通常屏幕底部有某种网格。今天它被指定为固定高度和溢出:auto;如果需要，可以使用样式来显示滚动条。

我正在寻找类似的东西:

HTML:

..
..lots of other elements
..
<div id="bottomGrid" style="width: 100%; height: 200px; overflow: auto;">
    I wish this grid would grow with the screen size.
</div>

然后调用这样的内容:

<script language="javascript" type="text/script">
   MakeElementGrowWithWindowSize('bottomGrid');
</script>

我尝试过设置 height: 100% 但这不起作用。将 doctype 从 XHTML 更改为 HTML4 会破坏很多其他内容，因此我真的希望用一些聪明的 javascript 来解决这个问题(jquery 就可以了)。

像往常一样，我们很匆忙，没有什么时间和金钱可以花+这是一个“巨大”的应用程序。重写 html 和样式并不是真正的选择。

Answer 1

类似于以下内容的内容可以工作，但是您需要修改此代码以允许 div 或正文上的填充。

$(document).ready(function () {
    $(window).resize(function() {
        $("#bottomGrid").css({width: $(this).width() + 'px', height: $(this).height() + 'px'});
    });
});

此外，作为旁注，可以纯粹在 HTML 中获得 100% 高度，但需要注意的是，DOM 中高于您想要 100% 高度的所有元素都必须设置其高度。