我正在从固定大小到自由流动的过程中重写“ Web应用程序”(即不是“ 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>
我试过设置高度:100%,但这不起作用。将doctype从XHTML更改为HTML4会破坏很多其他内容,因此我真的希望使用一些聪明的javascript解决这个问题(jquery很好)。
与往常一样,我们很着急,几乎没有时间和金钱可以花,这是一个“巨大”的应用程序。重写html和样式并不是真正的选择。
最佳答案
可以执行以下操作,但是您需要修改此代码,以允许在div或主体上进行填充。
$(document).ready(function () {
$(window).resize(function() {
$("#bottomGrid").css({width: $(this).width() + 'px', height: $(this).height() + 'px'});
});
});
另外,作为一个旁注,可以使100%的高度仅在HTML中工作,需要注意的是,DOM中所有要成为100%高度的元素都必须设置其高度。