Question 268287 in Html Question posted in
Some basic documentation can be found here.

Html – Remove scrollbar from child div

Here’s my HTLM.

.parent{
  border: 1px solid green;
}

.child1 {
  border: 1px solid darkgreen;
  height:200px;
}
.child2 {
  border: 1px solid pink;
  height:200px;
}
.child3 {
  border: 1px solid orange;
  height:200px;
}
<div class="parent" style="max-height:500px;">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3" style="position: sticky; bottom: 0px;"></div>
</div>

I want parent div to have a max-height, so a scrollbar can appear. But I want it only on child1 and child2, not child3 as the div is sticky bottom.

Is there a way to have a scrollbar from parent that ignores a child div ?

Tags:

2

Answers


  1. 0

    you can use the css propety overflow, to add or remove a scrolling bar.
    quelle

    <div class="parent" style="max-height:500px;">
  <div class="child1" style="overflow: scroll;"></div>
  <div class="child2" style="overflow: scroll;"></div>
  <div class="child3" style="position: sticky; bottom: 0px; overflow: hidden;"></div>
</div>
    Login or Signup to reply.
  2. 0

    Okay for this you need a extra div for the scrollabil Elements.

    I have added a ‘wrapper-scroll-vertically’ css class whitch is scrollabil and contains the elements that sould be scrolabil.

    I have alsow changed the display type to flex.

    hope that helps.

    <style>
    .parent{
        display: flex;
        flex-direction: column;
    border: 4px solid green;
    max-height:500px;
    }

    .child1 {
    border: 4px solid darkgreen;
    height:200px;
    width: 100%;
    }
    .child2 {
    border: 4px solid pink;
    height:200px;
    width: 100%;
    }
    .child3 {
    border: 4px solid orange;
    height:200px;
    width: 100%;
    }
    .wrapper-scroll-vertically{
        max-height: calc(100% - 200px);
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
</style>

<div class="parent">
    <div class="wrapper-scroll-vertically">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>
    <div class="child3"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search