How can I make column A and column C fixed with a 100% height of the window, so they don't move when scrolling down? The container display has to be set to flex.
My middle column, C, is the only one I want to scroll/move down (when scrolling the whole window, the body).
I tried with position fixed and absolute but did not get it to work. i can not set a "left" value of the div's, as other surrounding elements (not in this example) are fluid so "left" is not an exact known value for me.
html,body{
height:100%;
}
.container{
display:flex;
height:100%;
}
.a,.c{
width:100px;
height:100%;
background-color:pink;
display:inline-block;
}
.b{
width:400px;
background-color:tomato;
display:inline-block;
height:3000px;
}
<div >
<div >
A
<br/>lock
</div>
<div >
B
<br/>scrollable
</div>
<div >
C
<br/>lock
</div>
</div>
CodePudding user response:
Remove height: 100%;
from html
.
Then set the .a, .c
to height: 100vh;
and use position: sticky;
with top: 0;
.
body {
margin: 0;
height: 100%;
}
.container {
display: flex;
height: 100%;
}
.a,
.c {
width: 100px;
height: 100vh;
background-color: pink;
display: inline-block;
position: sticky;
top: 0;
}
.b {
width: 400px;
background-color: tomato;
display: inline-block;
height: 3000px;
}
<div >
<div >
A
<br/>lock
</div>
<div >
B
<br/>scrollable
</div>
<div >
C
<br/>lock
</div>
</div>