Jquery Div以适应浏览器窗口大小_Jquery_Css_Html_Cross Browser

Jquery Div以适应浏览器窗口大小

jquery css html

Jquery Div以适应浏览器窗口大小,jquery,css,html,cross-browser,Jquery,Css,Html,Cross Browser,我想创建一个适合浏览器窗口的div，但其下方有滚动时可见的内容我不希望div被修复，但我希望它与浏览器窗口的大小相同，并且在重新调整大小时我相信解决办法很简单，但我的脑子一片空白下面是我想要的样子您只需将高度设置为100% 但也要记住将html，body设置为100%以及您的div的所有家长例如，如果您有： <body> <div id="wrapper"> <div id="height100"></div> </div>

我想创建一个适合浏览器窗口的

div

，但其下方有滚动时可见的内容

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

我相信解决办法很简单，但我的脑子一片空白

下面是我想要的样子

您只需将高度设置为100%

但也要记住将

html

，

body

设置为

100%

以及您的div的所有家长

例如，如果您有：

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

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



导航
导航
导航
导航

内容
正文{页边距：0；}
.视口{
位置：绝对位置；
宽度：100%；
身高：100%；
背景：蓝色；
}
.belowviewport{
位置：绝对位置；
宽度：100%；
最高：100%；
高度：50px；
}

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

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

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

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

编辑： 如果您计划使用纯JavaScript，以下是一个解决方案：

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

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

给你。我想这就是你想要的：

-我来回答你的问题。因为这不是新的要求。在询问之前，谷歌搜索一次。

您的代码，您已经尝试过……“（…）但下面有滚动时可见的内容。”@silentw它将在下面有内容

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