修改

Question

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

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

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

以下是我希望它的样子。

Browser screenshot

Answer 1

您只需设置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%;
}

Answer 2

<强> 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;
}

Answer 3

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

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

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

Answer 4

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

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

Answer 5

您可以使用简单的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

Div适合浏览器窗口大小

5 个答案:

修改