Question

我在引导网格系统中有2个div，导航和主要内容。两者的长度可以根据内容的量而变化。我需要他们的风格，以填充100％的浏览器窗口IF如果没有内容自然到达底部。但是如果至少有一个div的内容比浏览器窗口的长度更多，我需要能够向下滚动页面，两个div的样式保持不变，并且两个div的高度都是2个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的高度

因此，让我们尽可能简单地实现这一目标：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

现在，如果你对两个div中的实际相同感到困扰，但只是希望它们至少是一个屏幕，你应该考虑使用CSS：

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

我认为这是更好的解决方案（没有Javascript！）和排序 - 做你想要的，但事实上你不会有同样高的div元素。但是，你几乎没有注意到它，因为每个都至少会填满页面。

Answer 2

您可以尝试使用视口高度：

例如：

#nav {
  min-height: 100vh;
}

#main {
  min-height: 100vh;
}

请参阅Bootply。

这也将消除对JavaScript的需求。

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

2 个答案: