根据窗口大小动态调整大小DIV(Dynamically resize div based on wi

我试图优化我的网站不同的分辨率。 在该网站的中心，我有目前有一个固定大小的一个DIV。 我试图根据浏览器窗口的大小使其尺寸（和内容）的变化。 我怎么做？ 这是我的网站，如果你想看看它的代码： http://www.briefeditions.com

Answer 1:

如果您调整页面大小的股利将与它在页面的负载调整。

$(window).on('load resize', function(){
    $('#div').width($(this).width());
});

Answer 2:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
$(document).ready(function(){
       var windowHeight = $(window).height();
       $('#divID').css('min-height',windowHeight+'px');
});

UPDATE

如果你想该网站将调整基于浏览器的尺寸调整，然后使用％，而非像素的

CSS：

html {height:100%; overflow:hidden}
body {height: 100%;}

Answer 3:

我猜你需要为客户机（用户）机屏幕宽度和高度。

在页的的onload得到屏幕宽度和高度，并设置这些值使用jquery / JavaScript来DIVS

var userscreen_width,userscreen_height;
userscreen_width = screen.width;
userscreen_height = screen.height;

检查这个更多信息

Answer 4:

请记住，在你的榜样iframe中也有固定的大小。 你也应该把它调整到父母的宽度。 在您的例子，这会工作：

$(window).on('load resize', function(){
    $('#content, #content > iframe').width($(this).width());
});

请记住，你必须删除所有的利润，以及绝对定位，如：从您元素的样式绝对的：顶部，左侧位置。

Answer 5:

我在问题所提供的链接检查代码。

在＃内容风格变动幅度80％。 而在.wrapper变动幅度为100％。

你已经主要920px用于宽度，所以每当你将调整窗口的控制不会调整。 使用等效％，而非920px;

Answer 6:

你可以这样做

var width = $(window).width(); 
$("#divId").width(width);

文章来源: Dynamically resize div based on window size