根据浏览器窗口的大小动态调整div的大小

Question

我正在尝试根据浏览器窗口的大小弄清楚如何动态调整div。我已经设置了一个说明我问题的jsbin，这里： http://jsbin.com/uxomul

我想要做的是调整保存图像的div的大小，以便div总是填充浏览器窗口高度的左边（除了底部的25px边距，设置在正文上）。

这是一个演示，可以说明我想要更清楚地实现的目标：http://emilolsson.com/shop/demo/layers

任何想法最好的方法是什么？

Answer 1

您可以这样做：

var width = $(window).width() - 25; 
$("#mydiv").width(width);

25只是一个样本数，例如你的保证金（你也可以动态得到它）

您可能还想将其包装到一个函数中，并在页面加载和调整大小

上调用它

Answer 2

您可以尝试绑定到浏览器窗口的resize事件。

例如：

window.onresize = function() {
//your code
}

Answer 3

必须修正位置，以便自动调整大小。

如果屏幕高度在运行时间发生变化

将它放在CSS表格中：

#FitScreenHeight
{
    position:fixed
    height:100%
}