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


Tags: html,css

Problem :

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



Solution :

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>


    CSS Howto..

    How to make a generic struct to contain any CSS properties' values

    How to apply same event to multiple buttons?

    how to vertically align div opposite to each other

    How to change the CSS on the last clicked div

    How to create CSS/JavaScript circles grid

    How to center multiple divs inside a container in CSS

    how to create a fixed js slider

    How to set a:visited and a:hover programmatically in ASP.NET

    CSS how to solve -webkit- functions

    How to use external css file to style a javafx application

    DevTools: How to visualize scss changes automatically without the need to save

    CSS Menu - how to [closed]

    How do I create a clickable button or link inside an tag and still be right-clickable?

    How to make custom css fonts render exactly like designs

    Couldn't understand CSS selectors meaning in the juizy slideshow stylesheet code

    What is WebKit and how is it related to CSS?

    how to position heading in the center of the page

    How to include css and jquery in joomla component

    How to make image stretch to a specific paragraph?

    How to emulate this layout in CSS?

    How do I correct this error?

    How do you get the height of a form div + error messages after hitting the submit button in javascript?

    How to add & show 4d image in web site with css

    how to set the font-family like a digital clock CSS? [closed]

    How to push down second dropdown when open first ?

    How to change a css element based on other element

    How do I disable position:fixed in web pages?

    how to stick the footer to the bottom of the page while moving it upward in a parallax-like effect?

    How to create the Facebook Status arrowed textbox?

    How does style elements such as “color” in CSS apply to elements like img?