Div适合浏览器窗口大小

时间：2013-08-14 11:59:41

标签： jquery css html cross-browser

我想创建一个适合浏览器窗口的div，但滚动时可以看到下面的内容。

我不希望修复div，但我希望它与浏览器窗口的大小相同，并且在重新调整大小时。

我确信解决方案非常简单，但我的思绪一片空白。

以下是我希望它的样子。

Browser screenshot

5 个答案:

答案 0 :(得分：2)

您只需设置height: 100%

即可

但请记住将html，body设置为100%以及所有div的父母。

例如，如果你有：

<body>
<div id="wrapper">
<div id="height100"></div>
</div>
<div id="content"></div>

你的CSS应该是这样的：

html, body, #wrapper, #height100 {
height: 100%;
}

答案 1 :(得分：1)

<强> CHECK THIS DEMO 

<div class='viewport'>
    <ul>
             <li>Nav</li>
             <li>Nav</li>
             <li>Nav</li>
             <li>Nav</li>
         </ul>
    <div class='belowviewport'>Content</div>
<div>


body { margin: 0;}
.viewport{
    position:absolute; 
    width:100%; 
    height:100%; 
    background: blue;
}
.belowviewport {
    position:absolute; 
    width:100%; 
    top:100%; 
    height: 50px;
}

答案 2 :(得分：0)

你走了。我认为这就是你所追求的：http://jsfiddle.net/NDrSm/ 

html, body {
     height: 100%;
     overflow: hidden;
}

div.container {
    height: 100%;
    overflow: auto;
    background: red;
}

答案 3 :(得分：0)

html, body{
    height : 100%;
    width : 100%;
    margin : 0
}
#content{
   height : 100%;
   width : 100%;
}

-1来自我的问题。因为这不是新要求。谷歌曾经问过。

答案 4 :(得分：-1)

您可以使用简单的jQuery解决方案：

function calc() {
    var $window = $(window),
        $nav = $('nav'),
        $content = $('#content');
    $content.height($window.height() - $nav.height());
}

DEMO

PS：您实际上可以通过css为内容div定义最小高度。

修改

如果您打算使用纯JavaScript，这是一个解决方案：

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0];

w.onload = calc();
w.onresize = calc();

function calc() {
    var nav = d.getElementById('nav'),
        content = d.getElementById('content');
    content.style.height = (getWindowHeight() - nav.clientHeight) + 'px';
}

function getWindowHeight() {
    return w.innerHeight|| e.clientHeight|| g.clientHeight;
}

DEMO

DEMO WITH MIN-HEIGHT 300px

相关问题
最新问题