Make absolute child full length inside a scrollable container

Question

With the following HTML and CSS

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
}
.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  background: blue;
}

<div class="container">
  <div class="full-height">
  </div>
</div>

The inner div takes up the full head of the container as desired. If I now add some other, flow, content to the container such as:

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
}
.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  background: blue;
}

<div class="container">
  <div class="full-height">
</div>

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
  maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate
  placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
</div>

Then the container scrolls as desired, however the absolutely positioned element is no longer anchored to the bottom of the container but stops at the initial view-able bottom of the container.

Is there any way of having the absolutely positioned element be the complete scroll height of its container without using JS?

Aurignacian

might i ask why you have top:0; there as well ? – Copaiba

no particular reason, i have a habit of over specifying things – Aurignacian

If you remove top: 0; it simply does not work anymore. – Unsupportable

Without JS to calc innerHeight, that will be hard. Unfortunately position:fixed does not work inside container because it's out of the flow so this 'workaround' would not work also :( – Bashful

All of my content is inside of absolute div, so they can overlay each other. Is there any way to use just CSS to make the main scrollbars (that control the body) control all the absolute divs as a unit, so that the highest div generates the overflow, without another vertical scrollbar? – Cahilly

Answer 1

You need to wrap the text in a div element and include the absolutely positioned element inside of it.

<div class="container">
    <div class="inner">
        <div class="full-height"></div>
        [Your text here]
    </div>
</div>

Css:

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

Setting the inner div's position to relative makes the absolutely position elements inside of it base their position and height on it rather than on the .container div, which has a fixed height. Without the inner, relatively positioned div, the .full-height div will always calculate its dimensions and position based on .container.

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
  float: left;
  margin-right: 16px;
}

.inner {
  position: relative;
  height: auto;
}

.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  height: 100%;
  background: blue;
}

<div class="container">
  <div class="full-height">
  </div>
</div>

<div class="container">
  <div class="inner">
    <div class="full-height">
    </div>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
    maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio
    cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
    quidem.
  </div>
</div>

http://jsfiddle.net/M5cTN/

Czarina

The fill-height element is clearly scrolling with the content, didn't the OP want it anchored? (By changing the blue background to a background image, you can see what I mean when I say that it's not anchored jsfiddle.net/M5cTN/82) – Selfpity

This only worked for me when I put a new div INSIDE the existing div, with overflow-y and max-height properties. – Cahilly

What a great answer. I seldom write a comment on good answers, but this is such a simple, straight forward solution that it's almost too good to be true. Well done and thank you – Missus

Answer 2

position: fixed; will solve your issue. As an example, review my implementation of a fixed message area overlay (populated programmatically):

#mess {
    position: fixed;
    background-color: black;
    top: 20px;
    right: 50px;
    height: 10px;
    width: 600px;
    z-index: 1000;
}

And in the HTML

<body>
    <div id="mess"></div>
    <div id="data">
        Much content goes here.
    </div>
</body>

When #data becomes longer tha the sceen, #mess keeps its position on the screen, while #data scrolls under it.

Helvetic

Fixed positioning will position the element relative to the browser, which may not be the desired result. – Meda

if you do not specify top,left,right,bottom position fixed element won't be positioned relatively to the window. But this has of course limited usage, only to default left top position, otherwise it will be positioned relatively to the window, it has also another disadvantage, width:100% or height:100% will be same as window's dimensions – Rentroll

transform: translate3d(0,0,0); on the parent will cause position: fixed to become relative to parent. Source coderwall.com/p/2wzj-a/… – Taro

But this doesnt solve the situation when you need fixed element and its parent with overflow hidden. Now it behaves as absolutely positioned – Selle

@AdriHM – that is right. And that is exactly what my answer says. Sorry that it does not help for your case. giaour's answer might better suit your needs. – Helvetic

Answer 3

So gaiour is right, but if you're looking for a full height item that doesn't scroll with the content, but is actually the height of the container, here's the fix. Have a parent with a height that causes overflow, a content container that has a 100% height and overflow: scroll, and a sibling then can be positioned according to the parent size, not the scroll element size. Here is the fiddle: http://jsfiddle.net/M5cTN/196/

and the relevant code:

html:

<div class="container">
  <div class="inner">
    Lorem ipsum ...
  </div>
  <div class="full-height"></div>
</div>

css:

.container{
  height: 256px;
  position: relative;
}
.inner{
  height: 100%;
  overflow: scroll;
}
.full-height{
  position: absolute;
  left: 0;
  width: 20%;
  top: 0;
  height: 100%;
}

Shelby

Unfortunately, if the blue div is positionned on the right of its container, it hides its scrollbar. – Walling

If anyone is looking for how to achieve the same result, but with a container of variable height (e.g. height: 100%), give this post on SO a read: #43539784 – Bonnes

Answer 4

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
}
.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  background: blue;
}

<div class="container">
  <div class="full-height">
  </div>
</div>

Heeling

Answer 5

Not that there's anything wrong with any of the other answers, but just for fun, I copied the original snippet and all I changed was height to min-height and I didn't have to add another <div> anywhere.

.container {
  position: relative;
  border: solid 1px red;
  min-height: 256px;
  width: 256px;
  overflow: auto;
}
.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  background: blue;
}

<div class="container">
  <div class="full-height">
</div>

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
  maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate
  placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
</div>

Imperturbable

Answer 6

I ran into this situation and creating an extra div was impractical. I ended up just setting the full-height div to height: 10000%; overflow: hidden;

Clearly not the cleanest solution, but it works really fast.

Venetis

Answer 7

.bottomDiv {
    position: relative;
    bottom: 0;
}

.parentDiv {
    display: flex;
    flex-direction: column;
}

.theDivPlacedOnTopofBottomDiv {
    flex-grow: 1 !important;
}

Laban

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Muddy