Javascript 根据窗口大小动态调整div的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11464679/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically resize div based on window size
提问by Johanna A
I'm trying to optimise my website for different resolutions. In the center of the website I have a DIV that currently has a fixed size. I'm trying to make its size (and contents) change according to the size of the browser window. How do I do that? This is my website if you want to take a look at its code: http://www.briefeditions.com
我正在尝试针对不同的分辨率优化我的网站。在网站的中心，我有一个当前具有固定大小的 DIV。我试图根据浏览器窗口的大小更改其大小（和内容）。我怎么做？如果你想看看它的代码，这是我的网站：http: //www.briefeditions.com
回答by Adam Merrifield
If you resize the page the div will resize with it and on load of the page.
如果您调整页面大小，div 将随之调整大小并在页面加载时进行调整。
$(window).on('load resize', function(){
$('#div').width($(this).width());
});
回答by HADI
<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
更新
If you want that site will resize based on browser resize then use %instead of px
如果您希望该站点根据浏览器大小调整大小，请使用%而不是px
CSS:
CSS：
html {height:100%; overflow:hidden}
body {height: 100%;}
回答by muthu
You can do like this
你可以这样做
var width = $(window).width();
$("#divId").width(width);
回答by Parag
I guess you need screen width and height for client(users) machine.
我猜您需要客户端（用户）机器的屏幕宽度和高度。
at onload of page get screen width & height and set those values to divs using jquery/javascript
在页面加载时获取屏幕宽度和高度并使用 jquery/javascript 将这些值设置为 div
var userscreen_width,userscreen_height;
userscreen_width = screen.width;
userscreen_height = screen.height;
回答by Arkadiusz 'flies' Rzadkowolski
Keep in mind that in your example iframe also has fixed size. You should also resize it to the parents width. In your example this would work:
请记住，在您的示例中 iframe 也具有固定大小。您还应该将其调整为父母的宽度。在您的示例中，这将起作用：
$(window).on('load resize', function(){
$('#content, #content > iframe').width($(this).width());
});
Keep in mind that you must remove all margins, as well as absolute positioning like: top, left, position:absolute from you element styles.
请记住，您必须从元素样式中删除所有边距以及绝对定位，例如：顶部、左侧、位置：绝对。
回答by Narendra
I checked the code from the provided link in question.
我检查了所提供链接中的代码。
Change width to 80% in #content style. And in .wrapper change width to 100%.
在#content 样式中将宽度更改为 80%。在 .wrapper 中将宽度更改为 100%。
You have used mainly 920px for width, so whenever you will resize window the control will not re-size. Use equivalent % instead of 920px;
您主要使用 920px 作为宽度，因此无论何时调整窗口大小，控件都不会重新调整大小。使用等效的 % 而不是 920px；
