CODEWITHSUNDEEP
javascripthtmljquerycss
obe
obe

Reputation: 7808

CSS: how to make a div extend beyond a scrollable container

I have a scrollable container - a div with overflow-y: scroll and position: relative.

I have a div inside it.

I have a second div, underneath the first, with position: absolute.

I would like the second div to extend beyond the bottom of the container div, but instead it increases the container's size.

If I remove the container's position: relative, then the second div does extend beyond the container, but it's positioned too far below (at the spot where it would have been positioned if there were no scrollbar).

I thought to give the second div position: fixed, but it's a problem, because the entire page may have a scrollbar, and when scrolled - I would like the second div to move together with its container.

The code:

<!-- container -->
<div style="position: relative; overflow-y: scroll; width: 400px; height: 400px; background-color: pink;">

    <!-- first div -->
    <div style="width: 20px; height: 800px; background-color: grey;">
    </div>

    <!-- second div -->
    <div style="display: block; position: absolute; width: 100px; height: 200px; background-color: red;">
    </div>

</div>

JSFiddle: https://jsfiddle.net/x341yvdn/

I prefer a CSS-only solution, but if it's not possible - then Javascript is also acceptable (vanilla or JQuery are both fine).

Upvotes: 0

Views: 739

Answers (1)

Parco
Parco

Reputation: 612

This might be what you're looking for

<html>

<body>
  <!-- container -->
  <div style="overflow-y: scroll; width: 400px; height: 400px; background-color: pink;">

    <!-- first div -->
    <div style="width: 20px; height: 800px; background-color: grey;">
    </div>

    <!-- second div -->
    <div style="display: block; position: absolute; width: 100px; height: 200px; background-color: red; top:400px;">
    </div>

  </div>
</body>

</html>

Upvotes: 1

Related Questions