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

Question

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

- Johanna A

---

可能是JQUERY：将div调整为窗口宽度的重复问题。 - kamaci

不使用CSS宽度属性百分比的原因是什么？ - kiranvj

Answer 1

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

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

- Adam Merrifield

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

- HADI

Answer 3

你可以这样做。

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

- muthu

Answer 4

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

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

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

- Narendra

Answer 5

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

在页面加载时，使用jQuery/JavaScript获取屏幕宽度和高度，并将这些值设置给div元素。

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

点击此处了解更多信息

- Parag

Answer 6

请记住，在您的示例中，iframe 也具有固定大小。您还应将其调整为父元素的宽度。在您的示例中，可以这样做：

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

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

- Arkadiusz 'flies' Rzadkowolski