将垂直滚动从页面移动到内部div [英] Move vertical scroll from page to inner div
问题描述
我在< html 元素上有一个没有垂直滚动的页面。我的意思是不管你如何缩放 - 它将调整到屏幕大小，并且总是有顶部（带有内部内容）的红色div与
要移除页面的滚动， height：calc（100％ - 83px） 其中 83px 是顶部和底部div高度和。但这里有个问题：当底部div的高度增加时，我需要用javascript更改可滚动中心div的高度。 我只想用 css 来解决这个问题。这是 jsfiddle 和布局描述的图片。
我到目前为止发现的内容：
- 我认为父级div应该为孩子设置一些
overflow：auto;并且很棘手？身高：100％且孩子必须拥有身高：100％ - 我无法使用绝对位置，因为我不知道中央div应该在哪里开始垂直结束
代码如下：
< style>
.fluid-inline {
display：inline-block;
身高：100％;
宽度：100％;
}
.wrapper {
/ *我想要移除硬编码的83像素大小* /
身高：calc（100％ - 83px）; / * SUM nav +页脚高度。* /
width：100％;
}
.left {
float：left;
}
.scrollable {
background：yellow;
身高：100％;
min-width：100px;
overflow-y：auto;
overflow-x：hidden;
}
< / style>
< nav>< / nav>
< div class =wrapper>
< div class =fluid-inline>
< div class =scrollable left>< / div>
< div class =scrollable>< / div>
< / div>
< div class =footer>
< / div>
我认为您正在寻找灵活框解决方案。它需要一些爱与关怀才能使它适用于所有现代浏览器，因此请查看 caniuse.com 了解这方面的信息。
值得指出的是，这并不适用于旧浏览器版本，并且如果支持必不可少，则需要JavaScript替代品。
html，body {height：100％; margin：0;}＃wrapper {height：100％;显示：弯曲; flex-direction：column;}＃header {height：50px; background-color：red;}＃content {flex：1;显示：flex; background-color：yellow;}。可滚动{width：50％;溢出-Y：汽车;向左飘浮; display：inline-block;}＃footer {background-color：green;}
< div id =wrapper> < div id =header>标题< / div> < div id =content> < div class =scrollable> < UL> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> < / UL> < / DIV> < div class =scrollable> < UL> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> <李→1< /锂> < / UL> < / DIV> < / DIV> < div id =footer>内容< / div>< / div>
I have a page without vertical scroll on <html element. I mean no matter how you zoom - it will adjust to screen size and there always be
- red div on top (with inner content) with fixed height
- dynamically expanded height green div on bottom (its height depends on inner content).
- Between those divs there's 1 more div with 2 children (with yellow background) that have scrollable content. This div should fluid the rest of space.
To remove page's scroll I just feet the html height perfectly to its inner elements sum by using height: calc(100% - 83px) where 83px is top and bottom divs height sum. But here's a problem: when the bottom div's height increases I need to change scrollable center div's height with javascript. I want to solve this only using css. Here's jsfiddle and the picture described by layout.
What I found so far:
- I think that parent div should have some kind of
overflow:auto;for children and a tricky ?height: 100%and children must have `height: 100%' - I can't use absolute position because I don't know where the central div should start and end vertically
The code is listed below:
<style>
.fluid-inline {
display: inline-block;
height: 100%;
width: 100%;
}
.wrapper {
/*I WANT TO REMOVE HARDCODED 83px SIZE */
height: calc(100% - 83px); /*SUM nav + footer height.*/
width: 100%;
}
.left {
float: left;
}
.scrollable {
background: yellow;
height: 100%;
min-width: 100px;
overflow-y: auto;
overflow-x: hidden;
}
</style>
<nav></nav>
<div class="wrapper">
<div class="fluid-inline">
<div class="scrollable left"></div>
<div class="scrollable"></div>
</div>
<div class="footer">
</div>
I think you are looking for a flex-box solution. It requires some love and care to get it to work on all modern browsers so take a look at caniuse.com for info about this.
It is worth pointing out that this does not work with old browser version at all and that a JavaScript substitute will be required if support is essential.
html,body{
height:100%;
margin:0;
}
#wrapper{
height:100%;
display:flex;
flex-direction:column;
}
#header{
height:50px;
background-color:red;
}
#content{
flex:1;
display: flex;
background-color:yellow;
}
.scrollable{
width: 50%;
overflow-y:auto;
float:left;
display:inline-block;
}
#footer{
background-color:green;
}
<div id="wrapper">
<div id="header">
Header
</div>
<div id="content">
<div class="scrollable">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<div class="scrollable">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
<div id="footer">
Content
</div>
</div>
这篇关于将垂直滚动从页面移动到内部div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
