CODEWITHSUNDEEP
htmlcssscroll
deepakssn
deepakssn

Reputation: 5363

Relative div inside Absolute div does not scroll on overflow

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.

  1. 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.
  2. 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>

Upvotes: 1

Views: 3872

Answers (2)

webkit
webkit

Reputation: 3369

You can do this:

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

DEMO

Upvotes: 3

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

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

Upvotes: 1

Related Questions