поддерживать высоту 100% с вертикальной прокруткой окна

Question

У меня есть базовая сетка бутстрапа, которую мне нужно, чтобы вертикально заполнить окно независимо от прокрутки. В настоящее время, если окно прокручивает все стили, резко заканчиваются в точке прокрутки.

Мне нужно, чтобы оба divs были длиной самого длинного из двух разделов и прокручивались друг с другом.

В этом случае возникает проблема: https://jsfiddle.net/frxpngcn/2/ Спасибо.

<div class="row"> 
<div id="nav" class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
    <ul> 
     <li>Link</li> 
     <li>Link</li> 
     <li>Link</li> 
     <li>Link</li> 
     <li>Link</li> 
     <li>Link</li> 
     <li>Link</li> 
    </ul> 
</div> 
<div id="main" class="col-xs-10 col-sm-10 col-md-10 col-lg-10"> 
    <h1>Header</h1> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
</div> 
</div> 

html, body, .row { 
    height: 100%; 
} 

#nav { 
    height: 100%; 
    background-color: green; 
} 

#main { 
    height: 100%; 
    background-color: yellow; 
} 

Answer 1

Переполнение CSS https://jsfiddle.net/8a74be3L/

Эта опция делает основной прокрутки Div не страница

#main { 
    height: 100%; 
    background-color: yellow; 
    overflow-y:scroll; 
} 

CSS Отступы https://jsfiddle.net/8a74be3L/3/

способ сделать это в чистом css - добавить глупое количество отступов на дно, а затем скрыть переполнение в классе контейнера.

.main-container { 
    overflow: hidden; 
} 

#nav { 
    float: left; 
    background-color: green; 
    padding-bottom: 500em; 
    margin-bottom: -500em; 
} 

#main { 
    float: left; 
    background-color: yellow; 
    padding-bottom: 500em; 
    margin-bottom: -500em; 
} 

JS Вариант https://jsfiddle.net/8a74be3L/2/

Этот параметр использует JS, чтобы получить высоту основного DIV и установить его в качестве высоты нав дел.

function resize() { 
    var h = document.getElementById('main').offsetHeight; 
    document.getElementById("nav").style.height = h + "px"; 
} 
resize(); 
window.onresize = function() { 
    resize(); 
};