根据浏览器大小动态提供元素宽度/高度属性

Question

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

因此，如果用户的浏览器窗口宽度为1100像素，宽度为750像素，那么.div-1，.div-2，.div-3也将分别为1100像素宽x 750像素高...... < / p>

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 });

如果您需要调整窗口大小（http://api.jquery.com/resize/）

，请使用调整大小

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

假设你只是在寻找一个jquery答案而你的元素不是顶级元素，那么如果它是

则没有区别

Answer 3

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

$(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