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

时间:2012-07-13 05:32:39

标签: javascript jquery css html resolution

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

6 个答案:

答案 0 :(得分:8)

如果您调整页面大小,则div将随之重新调整大小并加载页面。

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

答案 1 :(得分:1)

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

答案 2 :(得分:0)

你可以这样做

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

答案 3 :(得分:0)

我猜你需要客户端(用户)机器的屏幕宽度和高度。

atload of page get screen width&amp;高度并使用jquery / javascript

将这些值设置为div
var userscreen_width,userscreen_height;
userscreen_width = screen.width;
userscreen_height = screen.height;

check this for more info

答案 4 :(得分:0)

请注意,在您的示例中,iframe也具有固定大小。您还应该将其大小调整为父级宽度。在您的示例中,这将起作用:

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

请记住,您必须删除所有边距,以及绝对定位,例如:top,left,position:absolute from the element elements styles。

答案 5 :(得分:0)

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

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

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