maintain 100% height with vertical window scroll

问题

I Have a basic bootstrap grid that I need to vertically fill the window regardless of scrolling. Currently, if the window scrolls all styles end sharply at point of scroll.

I need both divs to be the length of the longest of the two divs, and to scroll with each other.

Here is a fiddle of the problem: https://jsfiddle.net/frxpngcn/2/ Thank you.

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

回答1:

CSS Overflow https://jsfiddle.net/8a74be3L/

This options makes the main div scroll not the page

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

CSS Padding https://jsfiddle.net/8a74be3L/3/

A way to do it in pure css is to add a stupid amount of padding to the bottom and then hide the overflow in the container class.

.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 Option https://jsfiddle.net/8a74be3L/2/

This option uses js to get the height of the main div and set it as the height of the nav div.

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

来源：https://stackoverflow.com/questions/32074698/maintain-100-height-with-vertical-window-scroll

标签

html

css

twitter-bootstrap