javascript - 根据窗口大小动态调整 div 大小

Question

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

Answer 1

如果您调整页面大小，则 div 将随之调整大小并在页面加载时调整大小。

$(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');
});

更新

如果您希望该站点根据浏览器调整大小调整大小，请使用%而不是px

CSS：

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

Answer 3

你可以这样做

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

Answer 4

请记住，在您的示例中 iframe 也具有固定大小。您还应该将其调整为父母的宽度。在您的示例中，这将起作用：

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

请记住，您必须从元素样式中删除所有边距以及绝对定位，例如：top、left、position:absolute。

Answer 5

我猜您需要客户端（用户）机器的屏幕宽度和高度。

在页面加载时获取屏幕宽度和高度并使用 jquery/javascript 将这些值设置为 div

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

检查此以获取更多信息

Answer 6

我检查了所提供链接中的代码。

在 #content 样式中将宽度更改为 80%。在 .wrapper 中将宽度更改为 100%。

您主要使用了 920px 作为宽度，因此无论何时调整窗口大小，控件都不会重新调整大小。使用等效的 % 而不是 920px；