Relative div inside Absolute div does not scroll on overflow

Question

I have the following structure in my code and I cannot change the absolute div or panel div - as it's part of existing code and affects multiple pages.

I need scroll on the relative div and it has to fill the bottom area of the absolute div - So I cannot have height in pixel as it has to match the user screen size.
I can add more divs inside relative div.

http://jsbin.com/wenap/4

   .absolute {
      background-color: #F0F0F0;
      border: 1px solid #000;
      bottom: 0;
      left: 0;
      overflow: hidden;
      position: absolute;
      top: 0;
      width: 300px;
      z-index: 0;
    }
    .panel {
      min-height: 100px;
      max-height: 150px;
      background: #fff;
      display: block;
    }
    .relative {
      overflow: scroll;
    }

 <div class="absolute">  
    <div>
    <div class="panel">MY PANEL - Variable height</div>
      <div class="relative">
        Need scroll here
        <li>A</li>
        <li>A</li>
    ...
      </div>
    </div>
  </div>

can panel have a fixed height?

webkit
– webkit

2014-06-15 06:16:35 +00:00
Commented Jun 15, 2014 at 6:16 — webkit
– webkit, Commented Jun 15, 2014 at 6:16

webkit · Accepted Answer · 2014-06-15 06:18:23Z

3

You can do this:

.relative {
  overflow: scroll; 
  position:absolute;
  height:calc(100% - 100px);
  width:100%;
}

DEMO

answered Jun 15, 2014 at 6:18

webkit

3,3691 gold badge19 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GiriB Over a year ago

This worked for me. Can you describe what's happening?

Suresh Ponnukalai · Accepted Answer · 2014-06-15 05:50:58Z

1

I don't know how to do it in pure CSS. But using the following jquery you can assign height to the relative height dynamically.

$(document).ready(function(){
var winhei = window.innerHeight;
var nonhei = $('.none').height();
var newhei = winhei - nonhei;
$('.relative').height(newhei);
});

FIDDLE DEMO

answered Jun 15, 2014 at 5:50

Suresh Ponnukalai

14k5 gold badges36 silver badges54 bronze badges

Collectives™ on Stack Overflow

Relative div inside Absolute div does not scroll on overflow

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related