Question

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％;它遵循内容高度，这是我不想要的。我希望将高度向下拉伸以适应浏览器高度。所以，如果我使用，身高：650px;它的工作原理，但如果页面调整到更小或更大的尺寸？如何检测正在查看的页面的浏览器大小并按比例更改高度，以便不会有滚动条？

Answer 1

这是div的默认机制..无需为此编写任何内容只需将<body>和<div>的边距和填充设置为零。

或者如果你对jquery或javascript感兴趣.. 然后你可以使用

做得更好

$(window).innerWidth()和 $(window).innerHeight() //上面的代码返回浏览器的视口区域

方法尽管使用

$(window).width()和 $(window).height()。 //此代码返回整个浏览器的宽度和高度。

Answer 2

这对我来说似乎更好。尽管calc（）并不是浏览器广泛支持的，但您仍然可以使用％。静态高度。

http://codepen.io/magnus16/pen/BlpeK

使用css reset并相应地调整边距，你应该好好去。

Answer 3

看起来你试图让div成为浏览器窗口的全长。如果是这样的话，使用像div {height: 100%; padding: 0; margin: 0; }这样的东西，如果你有其他div，那就不会工作了。

试试这个：

div { 

position:fixed;
top:0;
left:0;
right:0;
bottom: 0;

}

这将使您的div成为整个浏览器的高度，即使您的网站的其余部分也是如此。

小提琴中的例子：

http://jsfiddle.net/5MUTy/1/

Answer 4

在css文档中或在样式标记内，

html,body{
width:100%;
height:100%;
}
div{
width:100%;
height:100%;
}

Answer 5

下面是通过jQuery在div中添加CSS的正确语法。

$("#left").css('height', h +'px'); // where h is height variable.

Answer 6

好吧，我发现了，要使DIV适合页面底部只需要添加postion：absolute。但是因为我有两个DIV，一个在左边，另一个在右边，我添加了postion：固定在左边的DIV和postion：relative，float：右边的DIV。在此之前我添加了DIV {position：fixed}，然后只在Chrome和Firefox中有效，但在IE10中没有。所以我添加了高度：100％到DIV标签..现在它适用于所有浏览器..

感谢所有人分享你的想法。到目前为止，我没有使用任何jquery只有css！

如何调整div大小与浏览器大小成比例？

6 个答案: