垂直窗口滚动保持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屋!