垂直窗口滚动保持100％的高度 [英] 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.

我需要两个div都是两个div中最长的一个，并且彼此滚动.

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

这是问题的提琴手: https://jsfiddle.net/frxpngcn/2/谢谢.

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

推荐答案

CSS溢出 https://jsfiddle.net/8a74be3L/

此选项使主div滚动而不是页面

This options makes the main div scroll not the page

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

CSS填充 https://jsfiddle.net/8a74be3L/3/

在纯CSS中执行此操作的一种方法是在底部添加一定数量的填充，然后将溢出内容隐藏在容器类中.

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

此选项使用js来获取主div的高度并将其设置为导航div的高度.

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

这篇关于垂直窗口滚动保持100％的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！