jquery - 根据浏览器大小动态赋予元素宽度/高度属性

Question

如何为一组元素（例如.div-1, .div-2）.div-3.提供与浏览器窗口相同的尺寸？

因此，如果用户的浏览器窗口是 1100 像素宽和 750 像素高，那么,.div-1也将是 1100 像素宽 x 750 像素高....div-2.div-3

Answer 1

你可以在 CSS中使用width:100%和height:100%

如果他们要堆叠在上面……这也可以……'height:33%'

Answer 2

获取窗口的高度和宽度（http://api.jquery.com/width/和http://api.jquery.com/height/）

var w = $(window).width() + 'px';
var h = $(window).height() + 'px';

设置（http://api.jquery.com/css/）

$('.your_divs').css({ "width" : w, "height" : h });

如果您需要它们随着窗口大小的变化而调整大小，请使用 resize ( http://api.jquery.com/resize/ )

$(window).resize(function(){
    // reset width and height
});

假设您只是在寻找一个 jquery 答案并且您的元素不是顶级元素，那么如果它是没有区别的

Answer 3

使用 jQuery，您可以使用.height()和设置 div 属性.width()。

$(window).resize(function(){
    $("#div-1").height("100%");
    $("#div-1").width("100%");
});

这将调整div-1每次调整窗口大小时的大小，使其适合浏览器的当前高度/宽度。我还会看一下 CSS/Javascript 工具，例如Twitter Bootstrap，它们提供了简单的响应式页面框架，可以轻松调整以适应查看者的屏幕。

Answer 4

将其设置为position: absolute;并将top/ right/ bottom/ left属性设置为0

并且不需要 jquery