根据内容动态更改div高度，并在溢出时设置垂直滚动条。

-1

我有一个div它的高度是固定的。在div里面有两个divs，其中高度由于divs内的内容而动态变化。根据内容动态更改div高度，并在溢出时设置垂直滚动条。

<div id="panel"> 
    <div id="layerTree"> 

    </div> 

    <div id="features"> 
     <div id="accordion_equip"></div> 
     <div id="accordion_equip"></div> 
    </div> 
</div>

里面features div有两个divs有手风琴。无论何时当我们点击该手风琴时，由于手风琴的数据features div应该有一个垂直滚动条。

但是，当我们为features div设置固定高度时会出现垂直滚动条。但我无法设置固定高度，因为layerTree div高度也会根据里面的内容而变化。

那么，如何解决这个问题呢？

CSS：

#panel { 
    width: 20%; 
    height: 100%; 
    float: right; 
    position: relative; 
    top: 5px; 
} 

#features { 
    height: 365px; 
    overflow-y: auto; 
}

可惜我不能附上由于安全限制当前UI的任何图像。

来源

2017-01-02 Lalinda Sampath

上述*安全限制*还禁止您创建问题的[mcve]吗？如果您不得不... –

@AndreiGheorghiu正在处理它 –

我可以指望您要求的任何小提琴或图像吗？所以我可以修复它 –

我用JS修复了它。

  fixHeight = function() { 
       var p = $('#layerTree').outerHeight(); 
       var featureHeight = 555 - p; 
       $("#features").css("height", featureHeight); 
      };

来源

2017-01-03 03:48:27

更新CSS

#features { 
    min-height: 365px; 
    overflow-y: auto; 
}

来源

2017-01-02 04:45:43

不起作用，它不会显示垂直滚动条时，最大高度是100％。 –

好的我已经更新了。现在固定高度。立即试用 –

它适用于定义的宽度。但是每当layerTree内容发生变化时，features div的高度仍然是365px。 :( –

您可以为此设置内容min-height。因此，当内容高度与min-height不一致时，根据您的内容高度自动执行height。

#features { 
    min-height: 365px; 
    overflow-y: auto; 
}

如果你想显示垂直滚动条，那么你可以设置下面的css规则。

#features { 
    max-height: 365px; 
    overflow-y: scroll; 
}

来源

2017-01-02 04:51:02

这个并没有显示垂直滚动条，当我点击手风琴时 –

如果你想显示垂直条，你可以设置max-height：365px; y：scrol; –

根据内容动态更改div高度，并在溢出时设置垂直滚动条。

回答

相关问题