css - 关于设置 Bootstrap 3 模态百分比高度的问题

Question

你能看看this Demo吗？让我知道为什么我无法设置 Bootsrtap 模态的高度百分比

html, body{height: 100%;}
#myModal .modal-dialog { 
    position: relative;
    width: 80%;
    height: 50%;
    left: 1%; 
}

和模式

<a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Launch demo modal</a>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>
</div>
</div>

谢谢

Answer 1

您已成功设置模态对话框的高度。但是，这不是您看到的模态部分。您看到的部分是模态对话框内的模态内容。模态对话框的高度默认为其内容的大小。除了在模态对话框上设置百分比外，还需要将模态内容的高度设置为模态对话框的 100%。

Demo here

#myModal .modal-dialog .modal-content {
  height: 100%;
}

***注意 - 这会让你的模态看起来很奇怪，因为它现在会比它的内容大，你可能必须改变模态页眉、模态主体和模态页脚的高度才能很好地适应。