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.
});
});
我的 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;
}
我的 Html
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
现在的问题是左右DIV的高度。 如果我设置高度:100%；它遵循我不想要的内容高度。 我希望高度向下拉伸(stretch)以适合浏览器高度。 所以如果我使用，height:650px;它可以工作但是如果页面调整到更小或更大的尺寸怎么办？ 如何检测浏览器正在查看的页面的大小，并按比例改变高度，这样就不会出现滚动条了？
最佳答案
这是div的默认机制..不需要为此写任何东西
只需将 <body> 的边距和填充都设为零即可和 <div> .
或者如果你对 jquery 或 javascript 感兴趣.. 然后你可以通过使用
来做得更好 $(window).innerWidth()和
$(window).innerHeight()
//以上代码返回浏览器的视口(viewport)区域
尽管使用的方法
$(window).width()和
$(window).height() .
//此代码返回整个浏览器的宽度和高度。
关于jquery - 如何调整与浏览器大小成比例的 div 大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20137101/