Issue
I have a grid parent, with 2 columns. The left child has the same height as the parent (here is 100vh) and the right child is 1000px, which is greater than the parent.
HTML:
<body>
<div class="leftcol"></div>
<div class="rightcol"></div>
</body>
CSS:
body{
background-color: white;
display: grid;
grid-template-columns: 2fr 3fr;
margin: 0;
overflow: hidden;
}
.leftcol {
background-color: grey;
height: 100vh;
width: 100%;
}
.rightcol {
background-color: black;
height: 1000px;
width: 100%;
overflow: auto;
}
I only want the right child to be scrollable, since it's height is greater than the parent, the left child will stay still. I've read some other posts and they suggest using overflow: auto on the child but mine is not working.
Can anybody tell me what I did wrong here? Thank you.
Solution
try it
<body>
<div class="leftcol">
<p class="top">top</p>
<p class="bottom">bottom</p>
</div>
<div class="rightcol">
<p class="top">top</p>
<p class="bottom">bottom</p>
</div>
</body>
<style type="text/css">
body{
background-color: white;
display: grid;
grid-template-columns: 2fr 3fr;
margin: 0;
}
.leftcol{
background-color: grey;
height: 100vh;
width: 50%;
position: fixed;
left: 0;
top: 0;
}
.rightcol{
background-color: black;
height: 1000px;
width: 50%;
position: absolute;
right: 0;
top: 0;
}
.leftcol p,
.rightcol p {
text-align: center;
color: #fff;
}
.rightcol p.top {
top: 0;
}
.rightcol p.bottom {
bottom: 0;
padding-top: 900px;
}
.leftcol p.bottom {
padding-top: 80vh;
}
</style>
Answered By - Le Na
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.