引导3-根据屏幕大小设置模式窗口的高度

我正在尝试使用Bootstrap3模式对话框创建一种响应性的megamenu。我想将整个模式窗口的宽度和高度设置为视口的80%,同时将模式主体设置为最大高度,以避免在大视口上填充整个屏幕

我的HTML:

<div class=“模态衰减”>
<div class=“模态对话框模态菜单”>
<div class=“模态内容”>
<div class=“模态标题”>
<button type=“button”class=“close”data dismission=“modal”aria hidden=“true”>x&lt/按钮>
<h4 class=“模态标题”>模态超级菜单测试&lt/h4>
&lt/部门>
<div class=“模态体”>
<div class=“行”>
<div class=“col-md-3”&gt&lt/部门>
<div class=“col-md-3”&gt&lt/部门>
<div class=“col-md-3”&gt&lt/部门>
<div class=“col-md-3”&gt&lt/部门>
&lt/部门>
&lt/部门>
&lt/部门>
<div class=“模态页脚”>
<button type=“button”data dismission=“modal”class=“btn btn primary”>关闭&lt/按钮>
&lt/部门>
&lt/部门>
&lt/部门>

我的CSS:

.modal megamenu{
宽度:80%;
身高:80%;
}
.模态体{
最大高度:500px;
溢出:自动;
}

这与宽度的预期效果相同,但“高度”参数不会给出任何结果。与此类似,模式窗口的高度始终设置为“最大高度”值。有人知道如何根据视口高度动态设置高度吗

纯CSS解决方案,使用calc

。模态体{
最大高度:计算(100vh-200px);
溢出y:自动;
}

200px可根据收割台和;页脚

发表评论