javascript - 根据内容的长度使 div 成为浏览器高度的 100%

Question

我在 Bootstrap 网格系统中有 2 个 div、一个导航和一个主要内容。两者的长度都可能因内容量而异。我需要它们的样式都填充 100% 的浏览器窗口，如果它们都没有自然到达底部的内容。但是，如果至少一个 div 的内容多于浏览器窗口的长度，我需要能够向下滚动页面，同时保持两个 div 的样式不变，并且两个 div 的高度都为两个 div 中较长者的高度.

我目前正在使用一个 javascript 调整大小功能，它似乎可以工作，但在两个 div 的长度都不足以填充浏览器窗口的高度的情况下不起作用。有什么建议吗？

HTML

<div class="row">
    <div id="nav" class="col-xs-2">
        Variable Height Navigation
    </div>
    <div id="main" class="col-xs-10">
        Variable Height Content
    </div>
</div>

Javascript

function resize() {
    var h = (document.height !== undefined) ? document.height : document.body.offsetHeight;                                                           
    document.getElementById("nav").style.height = h + "px";
}

resize();
window.onresize = function () {
    resize();
};

Answer 1

我试图理解你的问题，如果我是正确的，你正在寻找的是:

• 两个 div 需要同样高
• 它们至少需要屏幕的高度
• 他们需要占据最高div的高度

所以让我们尽可能简单地实现这个目标:

var main = document.getElementById('main');
var nav  = document.getElementById('nav');

function resize(){
    var highest;
    // Set the divs back to autosize, so we can measure their content height correctly.
    main.style.height = 'auto';
    nav.style.height  = 'auto';
    // Find the highest div and store its height.
    highest = main.clientHeight > nav.clientHeight
        ? main.clientHeight
        : nav.clientHeight;
    // Check if the highest value is the div or the window.
    highest = highest > window.innerHeight
        ? highest
        : window.innerHeight;
    // Assign the newly found value
    main.style.height = highest + 'px';
    nav.style.height  = highest + 'px';
}
  
resize();
// Also, you don't need to wrap it in a function.
window.resize = resize;
// However, better would be:
window.addEventListener('resize', resize, false);

#main, #nav {
  width: 100%;
  height: auto;
}
#main { background: red; }
#nav { background: green; }

<div id="main"></div>
<div id="nav"></div>

现在，如果您不介意两个 div 的实际高度相同，只是希望它们至少占一屏，您应该考虑使用 CSS:

html, body { height: 100%; }
#nav, #main { min-height: 100%; }

我认为这是更好的解决方案(没有 Javascript!)并且可以做您想要的，除非您不需要同样高的 div 元素。但是，您几乎不会注意到它，因为它们至少会填满整个页面。