make div 100% от высоты браузера в зависимости от длины содержимого

Question

У меня есть 2 divs, навигация и основное содержимое в сетке бутстрапа. Длина может варьироваться в зависимости от количества контента. Мне нужно, чтобы они оба были написаны, чтобы заполнить 100% окна браузера, если ни один контент не достигнет дна. Но если хотя бы один из divs имеет больше контента, чем длина окна браузера, мне нужно иметь возможность прокручивать страницу вниз со стилями обоих div, оставшихся в такте, и обе имеют высоту дольше из двух divs ,

В настоящее время я использую функцию изменения размера 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>

Теперь, если вы не возиться с фактической тождественности в heiught обоих дивы, но просто хочу, чтобы они на лугах т быть один экранный, вы должны рассмотреть возможность использования CSS:

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

Я думаю, что это лучшее решение (! нет Javascript) и сортировки из делает то, что вы хотите, бар тот факт, что вы не должны в равной степени высокий div элементов. Тем не менее, вы едва заметили бы это, так как каждый по крайней мере заполнит страницу.

Answer 2

Вы можете попробовать использовать высоту видового экрана:

Например:

#nav { 
    min-height: 100vh; 
} 

#main { 
    min-height: 100vh; 
} 

См Bootply.

Это также удалит необходимость JavaScript.