如何调整div大小与浏览器大小成比例？
[英]How to resize div size proportional with browser size?
问题描述
JQuery 
JQuery的
$(window).ready(function(){
var w = $(window).width();//to detect the width of the browser
var h = $(window).height();//to detect the height of the browser
$(window).resize(function(){
var w = $(window).width();//new width of the browser
var h = $(window).height();//new height of the browser
$("#left").css('height'+ h 'px.');//this is where I'm not sure how to assign height value according to the browser size.
});
});
My css 我的css
#main
{
width: 100%;
height: 100%;
position: relative;
background: #000000;
}
#left
{
width: 20%;
height: 650px;
position: relative;
float: left;
background: #666666;
}
#right
{
width:80%;
height: 650px;
position: relative;
float:right;
background: #ff9900;
}
My Html 我的Html
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
Now the problem is the height of left and right DIV. 现在问题是左右DIV的高度。 if I set the height:100%; 如果我设置高度：100％; it follows the content height ,which I don't want . 它遵循内容高度，这是我不想要的。 I want the height stretched down to fit the browser height. 我希望将高度向下拉伸以适应浏览器高度。 So if I use, height:650px; 所以，如果我使用，身高：650px; it works but how if the page resized to smaller or bigger size? 它的工作原理，但如果页面调整到更小或更大的尺寸？ How to detect the size of the browser the page being viewed and proportionally change the height so that there won't be scrollbar? 如何检测正在查看的页面的浏览器大小并按比例更改高度，以便不会有滚动条？
6 个解决方案
解决方案1
1 2013-11-22 04:41:10
It was default mechanism of a div.. no need to write anything for this just put margin and padding to zero for both <body> and <div> . 这是div的默认机制..无需为此写任何内容，只需将<body>和<div>边距和填充设置为零。
Or If you are interested in jquery or javascript.. Then you can do it better by using 或者如果你对jquery或javascript感兴趣..那么你可以通过使用更好地做到这一点
$(window).innerWidth() and $(window).innerHeight() //Above code returns the viewport area of the browser $(window).innerWidth()和$(window).innerHeight() //上面的代码返回浏览器的视口区域
methods in-spite of using 尽管使用的方法
$(window).width() and $(window).height() . $(window).width()和$(window).height() 。 //This code returns the entire browser width and height. //此代码返回整个浏览器的宽度和高度。
解决方案2
1 2013-12-06 02:54:42
Here this seems to work better for me. 这对我来说似乎更好。 Although calc() is not that widely supported by browsers but you could still you static height in %. 虽然calc（）并不是浏览器广泛支持的，但你仍然可以静态高度为％。
http://codepen.io/magnus16/pen/BlpeK http://codepen.io/magnus16/pen/BlpeK
Use with css reset and adjust your margins accordingly and you should be good to go. 使用css reset并相应地调整边距，你应该好好去。
解决方案3
0 已采纳 2013-11-22 04:46:21
It looks like your trying to make the div the full length of the browser window. 看起来你试图让div成为浏览器窗口的全长。 If so, using something like div {height: 100%; padding: 0; margin: 0; } 如果是这样，使用像div {height: 100%; padding: 0; margin: 0; }这样的东西div {height: 100%; padding: 0; margin: 0; } div {height: 100%; padding: 0; margin: 0; } div {height: 100%; padding: 0; margin: 0; } wont work if you have other divs in the way. div {height: 100%; padding: 0; margin: 0; }如果你在路上其他的div不会工作。
Try this: 尝试这个：
div {
position:fixed;
top:0;
left:0;
right:0;
bottom: 0;
}
that will make your div the height of the entire browser even with the rest of your site in the way. 这将使你的div成为整个浏览器的高度，即使你的网站的其余部分也是如此。
example in a fiddle: 小提琴中的例子：
解决方案4
0 2013-11-22 04:46:24
In the css document or within style tags, 在css文档中或样式标记内，
html,body{
width:100%;
height:100%;
}
div{
width:100%;
height:100%;
}
解决方案5
0 2013-11-22 05:03:12
下面是通过jQuery在div中添加CSS的正确语法。
$("#left").css('height', h +'px'); // where h is height variable.
解决方案6
0 2013-11-24 08:39:16
Well, I found that, to make a DIV fit to the bottom of a page just need to add postion:absolute. 好吧，我发现，要使DIV适合页面底部，只需要添加postion：absolute。 but since I'm having two DIVs ,one on left and another on the right, I add postion:fixed to the left DIV and postion :relative ,float:right to the right DIV. 但由于我有两个DIV，一个在左边，另一个在右边，我添加了postion：固定在左边的DIV和postion：relative，float：右边的DIV。 prior to that I added DIV{position:fixed}, then only it worked in Chrome and Firefox but not in IE10. 在此之前我添加了DIV {position：fixed}，然后只在Chrome和Firefox中有效，但在IE10中没有。 So I added height:100% to the DIV tag..now it works in all browsers.. 所以我添加了高度：100％到DIV标签..现在它适用于所有浏览器..
Thanks for all for sharing your thoughts.Bytheway I didn't use any jquery so far only css! 感谢所有人分享你的想法。到目前为止，我没有使用任何jquery只有css！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.