【问题标题】:min-height not working for bootstrap modal window最小高度不适用于引导模式窗口
【发布时间】:2015-08-01 07:04:33
【问题描述】:

我尝试创建一个具有全高的模式窗口,即使内容很小。我将 css min-height:100% 设置为 .modal-dialog 并尝试了各种其他选项。但 min-height 不适用于模态窗口。

我的要求是:

即使内容是小模态窗口也应该是全屏

如果内容很大,模态窗口应该有一个滚动条并且应该包含所有内容。

【问题讨论】:

  • 同时应用height:100%min-height:100%
  • 我也试过了,但没用
  • 尝试使用min-height: 100vh;

标签: css twitter-bootstrap modal-window


【解决方案1】:

只有当对象位于已知高度的元素内时,才能使用高度 100%。如果父级没有高度,则浏览器没有可参考的内容。

纯 CSS 中的解决方案:

.my-div {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}

您可以在打开对话框的 jquery 函数中进行设置:

$('.my-div').css('height', window.innerHeight);

【讨论】:

    【解决方案2】:

    试试这个

    .modal-dialog {
      width: 100%;
      height: 100%;
      padding: 0;
    }
    
    .modal-content {
      min-height: 100%;
      height:auto;
      border-radius: 0;
    }
    

    How to make Twitter bootstrap modal full screen

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2018-07-29
      • 1970-01-01
      • 2011-04-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多