根据浏览器窗口的大小动态调整div大小 [英] Dynamically resize div based on size of browser window

问题描述

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

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

这里有一个演示，可能说明我想要更清楚地实现： http ：//emilolsson.com/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: http://jsbin.com/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: http://emilolsson.com/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

这篇关于根据浏览器窗口的大小动态调整div大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！