Question

我有一个基本的引导网格，无论滚动如何，我都需要垂直填充窗口。目前，如果窗口滚动所有样式在滚动点处急剧结束。

我需要两个div作为两个div中最长的div的长度，并且相互滚动。

这是问题的一个小提琴：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 Padding 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的高度并将其设置为nav div的高度。

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

垂直窗口滚动保持100％高度

1 个答案: