Question

我有一个带有相当多文字的模态。我试图弄清楚如何将模态高度限制为窗口大小，并在OK按钮上方的内容区域添加滚动条。

<note>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
          <from>Jani</from>
          <to>Tove</to>
....

Answer 1

更新为使用window.innerHeight，并且有一个名为clientHeight的属性/指令，它接受一些数字并将其用作百分比乘以window.innerHeight来调整一些内容的大小并设置overflow-y

http://plnkr.co/edit/9eg3jH0vILntygMn3ieD?p=preview

app.directive('clientHeight', function(){
  return {
    link:function(scope, iElem, iAttrs){
      debugger;
      iElem.css('height', window.innerHeight*iAttrs.clientHeight/100+'px')
      iElem.css('overflow-y', 'scroll')
    }
  }
});

你可以单独用CSS来解决这个问题，也许可以使用“calc”或其他方法，但如果没有，上面的JS解决方案也能正常工作。

Answer 2

你可以使用CSS，不需要JavaScript。

.modal-body {
    max-height: 500px; /* adjust to your needs */
    overflow-y: auto;
}

角度UI - 相对于窗口高度的模态高度

2 个答案: