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

本文介绍了根据浏览器窗口的大小动态调整div大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想弄明白如何让div动态调整大小，基于浏览器窗口的大小。我设置了一个jsbin来说明我的问题，在这里： jsbin/uxomul

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

这里有一个演示，可能说明我想要更清楚地实现： http ：//emilolsson/shop/demo/layers

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

解决方案

您可以这样做：

var width = $（window）.width（） - 25; $（＃mydiv）。width（width）;

25只是一个示例数字，例如您的保证金（您也可以动态获得） p>

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

I'm trying to figure out how to have a div dynamically resize, based on the size of the browser window. I've set up a jsbin that illustrates my problem, here: jsbin/uxomul

What I want to do is to resize the div that holds the images so that the div always fills what's left of the height of the browser window (except a 25px margin at the bottom, that's set on body).

Here's a demo that maybe illustrates what I want to achieve more clearly: emilolsson/shop/demo/layers

Any ideas what would be the best way to approach this?

解决方案

You can do something like this:

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

25 is just a sample number, for example your margin (you can get this dynamically too)

You may also want to wrap it into a function and call this on both page load and on resize