How to use overflow-y:auto with child with bottom: 0 and position:absolute?


Tags: html,css,css3,scroll

Problem :

I have a div with overflow-y:auto; and some elements, at the bottom I have a footer. The footer sticks to the bottom with: position: absolute; and bottom: 0px; It works...until I decrease the height of the parent too much, then the footer is no longer at the bottom of the div. How to fix this? JS Fiddle: https://jsfiddle.net/smfg7357/2/

html:

<div class="outer">
  <div class = "inner">
    <div class= "item">item1</div>
    <div class= "item">item2</div>
    <div class= "item">item3</div>
    <div class= "item">item4</div>
    <div class= "item">item5</div>
    <div id="footer">footer</div>
  </div>
</div>

css:

.outer{
  background-color: lightblue; 
  width: 150px;
  height: 200px;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.inner{

}

.item{
  padding: 15px;
  color: white;
  background-color: blue;
}

.item:hover{
  background-color: darkblue;
}

#footer{
  position:absolute;
  bottom: 0px;
  width: 120px;
  background-color: red;
  padding: 15px;
  color: white;
}

#footer:hover{
  background-color: darkred;
}


Solution :

You need to relatively position the parent element, .inner, so that the child #footer element is positioned relative to its height rather than the .outer element's height.

Updated Example

.inner {
  position: relative;
  min-height: 100%;
}

When absolutely positioning an element, it will be positioned relative to the closest positioned ancestor element (in other words, the closest ancestor element that isn't the default position: static). By adding position: relative to the .inner element, the #footer element will be absolutely positioned at the bottom of it rather than the bottom of the .outer element. In addition, you can also set the .inner element's min-height to 100% so that it will always have a minimum height equal to the height of the .outer element.


It's also worth pointing out that absolutely positioned elements are removed from the normal flow, which means that it will overlap with your last element (in this case item 5 won't be visible). If this isn't the desired result, you could simply displace the element with padding. In this case, since the element has a fixed height of 48px, simple add padding-bottom: 48px to the .inner element as well:

Updated Example

.inner {
  position: relative;
  min-height: 100%;
  padding-bottom: 48px;
  box-sizing: border-box;
}

However, you can avoid absolute positioning and utilize flexboxes. Simply set the display of the parent element to flex and then change the flex-direction to column and add margin-top: auto to the .footer element in order to position it at the bottom of the parent element.

.parent {
  height: 400px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.footer {
  margin-top: auto;
}

Basic example here:

.parent {
  background-color: lightblue;
  width: 150px;
  height: 400px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.item, .footer {
  padding: 15px;
  color: white;
  background-color: blue;
}

.footer {
  background-color: red;
  margin-top: auto;
}
<div class="parent">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="footer">footer</div>
</div>


    CSS Howto..

    CSS- How to create child menu towards leftern side

    How-to set background-position-x?

    Using CSS, how to modify a child element by its class without impacting another child element with the same class but slightly different parent

    How can I ensure that my absolutely positioned div is tall enough to meet my sticky footer?

    How are these sites implementing their onhover overlays?

    How can I target text input fields with CSS?

    Inner div has borders - how to override with a class on an outer div?

    how to achieve this effect with css html?

    css-how to set a three parallel DIV?

    how to reference elements in CSS or JS files for fastest parsing?

    How to make the search form without the search button?

    Large gap between text, how to fix?

    How can I align two icons on my webpage next to each other?

    How to vertically align absolutely positioned images on top of one another?

    How to create dropdown menu that appears based on answer from another dropdown menu

    Shadow DOM: how to apply CSS style only if the host element is ?

    How can I make my Div box holder look like this inside with CSS?

    How do you fade horizontal text into a vertical gradient?

    How do I center and auto-resize this css loader?

    How to include CSS for a specific part of the page

    How to set the background image width using CSS?

    How to fake width animation with CSS transform?

    How to set CSS of one element depending on another element having a specific class?

    How do I offset where my fixed nav bar takes me?

    how to show JS alert on open of each tab of the slider?

    How to create this type of element using XHTML & CSS?

    How do I make link the highlight link conform to CSS shape

    How to control the speed of a SVG line animation with CSS

    How can you assign a class to an id in css or javascript?

    How to deal with different screen resolutions in CSS?