Move vertical scroll from page to inner div
I have a page without vertical scrolling on an element <html
. I mean, no matter how you zoom in - it will adjust the screen size and will always
- red div on top (with inner content) with fixed height
- dynamically expanded height of the green div at the bottom (its height depends on the inner content).
- In between these divs, there is another div with 2 children (with a yellow background) that have scrollable content. This div should crowd out the rest of the space.
To remove the scrolling of the page, I just perfectly align the html height to its inner elements using where are the top and bottom divs height values. But here's the problem: when increasing the bottom height of the div, I need to change the scrollable center height of the div using javascript. I want to solve this with just help . Here's the jsfiddle and the image described by the mock.
What I have found so far: height: calc(100% - 83px)
83px
css
- I think the parent div should have some kind of
overflow:auto;
child - friendly and complex ?height: 100%
and children should have `height: 100% ' - I can't use absolute position because I don't know where the center end 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>
source to share
I think you are looking for a flex-box solution. It takes some love and care to get it to work in all modern browsers, so take a look at caniuse.com for information on this.
It is worth noting that this does not work at all with an older version of the browser and that JavaScript replacement will be required if support is needed.
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;
min-height: 0; // FF FIX
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>
source to share