Question

我的代码中有以下结构，我无法更改绝对div或面板div - 因为它是现有代码的一部分并影响多个页面。

我需要在相对div上滚动，它必须填充绝对div的底部区域 - 所以我不能有高度像素，因为它必须匹配用户屏幕大小。
我可以在相对div中添加更多div。

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

Answer 1

你可以这样做：

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

DEMO

Answer 2

我不知道如何在纯CSS中做到这一点。但是使用以下jquery，您可以动态地为相对高度指定高度。

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

FIDDLE DEMO

Absolute div中的相对div不会在溢出时滚动

2 个答案: