[英]Dynamically resize div based on window size
我正在尝试针对不同的分辨率优化我的网站。 在网站的中心,我有一个目前有固定大小的DIV。 我正在尝试根据浏览器窗口的大小改变其大小(和内容)。 我怎么做? 这是我的网站,如果你想看看它的代码: http : //www.briefeditions.com
如果您调整页面大小,div将使用它和页面加载时调整大小。
$(window).on('load resize', function(){
$('#div').width($(this).width());
});
<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
html {height:100%; overflow:hidden}
body {height: 100%;}
你可以这样做
var width = $(window).width();
$("#divId").width(width);
我想你需要客户(用户)机器的屏幕宽度和高度。
在onload of page获取屏幕宽度和高度,并使用jquery / javascript将这些值设置为div
var userscreen_width,userscreen_height;
userscreen_width = screen.width;
userscreen_height = screen.height;
请注意,在您的示例中,iframe也具有固定大小。 您还应该将其大小调整为父级宽度。 在您的示例中,这将起作用:
$(window).on('load resize', function(){
$('#content, #content > iframe').width($(this).width());
});
请记住,您必须删除所有边距,以及绝对定位,如:top,left,position:absolute from the element elements styles。
我检查了提供的链接中的代码。
在#content样式中将宽度更改为80%。 并在.wrapper中将宽度更改为100%。
您主要使用920px作为宽度,因此无论何时调整窗口大小,控件都不会重新调整大小。 使用等效的%而不是920px;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.