语义 UI 模态高度太长

Question

我正在使用语义 UI 创建网页（没有 React、NPM 或任何花哨的东西，只是普通的 HTML/CSS）。我正在尝试向我的页面添加模态，但由于模态高度太长，它的行为非常奇怪。我的代码中没有任何其他框架，例如 Bootstrap。

它的行为方式：

它应该如何表现：

语义UI版本：2.4.2

Semantic UI 安装正确吗？ 是的，其他组件工作。

我的代码

HTML:

<div id="myModal" class="ui basic modal">
        <div class="ui icon header">
            <i class="archive icon"></i>
            Archive Old Messages
        </div>
        <div class="content">
            <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
        </div>
        <div class="actions">
            <div class="ui red basic cancel inverted button">
                <i class="remove icon"></i>
                No
            </div>
            <div class="ui green ok inverted button">
                <i class="checkmark icon"></i>
                Yes
            </div>
        </div>
    </div>

JS:

$('.ui.basic.modal')
  .modal('show')
;

到目前为止我尝试了什么：

#myModal { position: relative;} 然后将 id 添加到我的模式中，如以下答案中所述：
body{ max-height: 100vh; } 如此处解释：
此 Fiddle 中解释的代码（不是我的 fiddle）：http://jsfiddle.net/MrLogical/2hda8e18/

谢谢！！

Answer 1

在你的 JSfiddle 中，我注意到你的 div 在 .modal-content 里面有 min-height: 1000px。我删除了它，模态现在是正常高度了。

Answer 2

这不是模态框高度的问题。这是因为 'semantic-ui-css' 最新版本的版本。你可以通过安装2.2.14版本的semantic-ui-css来解决这个问题 *

npm install semantic-ui-css@2.2.14

* 它为我和许多其他人做了。所以希望它也对你有用

语义 UI 模态高度太长

Semantic UI Modal Height too long

html

javascript

css

jquery

semantic-ui

我的代码

HTML:

JS:

到目前为止我尝试了什么：