CODEWITHSUNDEEP
htmlcss
dugla
dugla

Reputation: 12954

JS/CSS. How do I force a child div to the bottom of it's parent div

I have a parent-child div relationship with the child intended as a horizontal scrollbar attached to the bottom edge of the parent.

The parent is a vertically growable/shrinkable container for rectangular strips that are added/deleted by the user interactively.

How do I force the scrollbar to adhere to the parent's bottom edge?

Here is my current css situation:

.parent-div {
    position: absolute;
    left: 0;
    top:80px;
    right: 0;
}

.horizontal-scrollbar-div {
    position: absolute;
    top:  0;
    left: 0;
    bottom:-50px;
    height:50px;
    width: 100%;
    z-index: 500;
}

This is not working correctly. At runtime strips get added the scrollbar remains at the top edge of the parent (initially there are no horizontal strips so the parent has 0 height).

What are the css changes I need to make here?

Thanks,
Doug

Upvotes: 0

Views: 168

Answers (2)

Grandpapa
Grandpapa

Reputation: 173

Marc's answer is right, but in order for it to work you need to add "position: relative;" on the ".parent-div". Otherwise the ".horizontal-scrollbar-div" would position itself according to the body element instead of ".parent-div".

Here is how I would do it. You can change the height of parent and the scrollbar will always stay at bottom of the parent-div. 

.parent-div {
  position: relative;
  height:200px;
  background-color:#aaa;
}

.horizontal-scrollbar-div {
  position: absolute;
  bottom: 0;
  height:50px;
  width: 100%;
  background-color:yellow;

}
<div class="parent-div">
  <div class="horizontal-scrollbar-div"></div>
</div>

Upvotes: 1

Marc Audet
Marc Audet

Reputation: 46785

I would try the following:

.horizontal-scrollbar-div {
    position: absolute;
    left: 0;
    bottom: 0;
    height:50px;
    width: 100%;
    z-index: 500;
}

You want the bottom edge of .horizontal-scrollbar-div to be pinned to the bottom edge of the parent container.

Note: You may not need the z-index property.

Also: You may need a minimum height to .parent-div.

Upvotes: 1

Related Questions