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 do you create a html scrollable area, that just uses the main browser scrollbar

    How to add css files to a custom module in Odoo 8?

    How to show just one line of text in paragraph with width 100% which is part of the table cell?

    How can I disable the color defined in an previously defined CSS class

    How to overwrite “left: 80%” from inline CSS

    HTML/CSS: How to move my navigation bar to the middle?

    How to change the cursor icon when dragging in HTML5?

    How can i fit my webPage in browser when user makes browser window big?

    How to fade in and out text and css using jquery

    Angular: How to alternate CSS classes for a list, with more than 2 classes?

    how to add a home button from css in jquery mobile?

    How can I place multiple spans in the same line?

    CSS: How to fake a :hover state?

    How to fix an image to the bottom right with resizing window?

    How to make bootstrap btn-group break into half naturally

    How To Apply jQuery CSS Selector

    Nth-child css property is counting html elements with display property set to none. How to change it?

    jQuery how to add another css in code?

    How can I select this element?

    How to overlay shadow with bootstrap?

    Making breadcrumbs… not as easy as literally making breadcrumbs, how can I get text to be inside?

    How to set the RadioButton icon style to nothing in CSS (in Flex 3)?

    How to make a border colorful using CSS?

    How to style a tag for current div with css?

    How to add color to text in my div with code

    Showing images conditionally

    How to control the CSS on an Active/Focused button in Foundation 5 [RESOLVED]

    How can I take pseudo:after { content: “Value”; } value dynamically in this snippet?

    How to conditionally adjust paddings using css only?

    How do I force nested list items to be the same width as parent list item?