语义-ui模态拉伸窗口高度答案

【问题标题】：semantic-ui modal stretching window height语义-ui模态拉伸窗口高度
【发布时间】：2015-06-08 03:24:52
【问题描述】：

我在这个页面上看到：http://semantic-ui.com/modules/modal.html#/examples

为了避免这种情况，您可以简单地将“long”类添加到模态。我这样做了，但它仍然在拉伸窗口高度。有谁知道为什么会这样，或者我如何调试这种行为？我希望能够滚动我的模式，而无需拉伸窗口高度。

【问题讨论】：

请向我们展示您的代码，以便我们提供帮助
示例不拉伸父窗口高度。它只调整模态的调光器以启用调光器 div 内的滚动。
恐怕我的代码太复杂，无法在 sn-p 中发布。但我注意到了一些奇怪的事情。当我删除长模式中的内容并替换为固定高度 = 3000px 的 div 时，滚动工作。但是，如果我随后将我的内容放在该 div 中，则模式会拉伸我的窗口高度。对这种行为有什么想法吗？
现在我完全被难住了。我在这个小提琴中镜像了我的设置：jsfiddle.net/mikestaub/waxLrqk8 但是当我在自己的代码中取消注释第 13-15 行时，红色部分在滚动后增加了 3k 像素。语义模态是否不能很好地与角度 ng-repeat 配合使用？
相关/复制：stackoverflow.com/a/30342059/2302269

【解决方案1】：

对于将来遇到此问题的任何人，我最终使用的解决方法只是添加此 css 规则：

body{ max-height: 100vh; }

【讨论】：

【解决方案2】：

这是可能的

http://jsfiddle.net/MrLogical/2hda8e18/

$('.modal-btn').click(function(){
    $('.modal-content').show();
});
$('.modal-btn-close').click(function(){
    $('.modal-content').hide();
});

.modal-btn{color:red; cursor:pointer;}

.modal-content{
    overflow-y:scroll;
    display:none;
    position:fixed; 
    top:0px; left:0px;
    width:100%; height:100%;
    background-color:rgba(0,0,0,0.2);
}

.modal-content div{ background-color:#FFF; box-shadow:0px 0px 5px rgba(0,0,0,0.2); border-radius:20px; padding:20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Run This Code <span class="modal-btn">Click Me !!!</span>

<div class="modal-content">
    <div style="margin:30px; min-height:1000px;">
        Long Content
        <hr/>
        <span class="modal-btn-close">hide me</span>
    </div>
</div>

【讨论】：

谢谢，这是一个可行的选择。