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

我正在尝试使用Bootstrap 3模式对话框创建一种响应式megamenu。我想将整个模式窗口的宽度和高度设置为视口的80％，同时将模态主体设置为最大高度，以便不在大视口上填充整个屏幕。Bootstrap 3 - 根据屏幕大小设置模式窗口的高度

我的HTML：

<div class="modal fade"> 
      <div class="modal-dialog modal-megamenu"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> 
         <h4 class="modal-title">Modal Mega Menu Test</h4> 
        </div> 
        <div class="modal-body"> 
         <div class="row"> 
          <div class="col-md-3"></div> 
          <div class="col-md-3"></div> 
          <div class="col-md-3"></div> 
          <div class="col-md-3"></div> 
         </div> 
        </div> 
       </div> 
        <div class="modal-footer"> 
         <button type="button" data-dismiss="modal" class="btn btn-primary">close</button> 
        </div> 
      </div> 
     </div>

我的CSS：

.modal-megamenu { 
    width:80%; 
    height:80%; 
} 

.modal-body { 
    max-height:500px; 
    overflow:auto; 
}

这可以作为用于宽度，但 “高度” 参数没有给出任何结果。像这样，模态窗口的高度始终设置为最大高度值。有没有人知道如何根据视口高度动态设置高度？

来源

2013-10-02 Ralf Glaser

我假设你正在寻找类似于此的东西 - > http://jsfiddle.net/KanvL/1/ – Morpheus

尝试：

$('#myModal').on('show.bs.modal', function() { 
$('.modal-content').css('height',$(window).height()*0.8); 
});

来源

2013-11-18 20:46:19

只是为了澄清，这只是需要在'.modal（'show'）'命令之前if这是用过的。 – Dean

这是一个很好的解决方案。只要不要忘记添加css（'overflow'，'auto'）以防万一你的内容太大。 –

你介意解释为什么神奇数字“0.8”？谢谢！ – renatoargh

类似低音，我只好也设置溢出-Y。这实际上可以在CSS

$('#myModal').on('show.bs.modal', function() { 
    $('.modal .modal-body').css('overflow-y', 'auto'); 
    $('.modal .modal-body').css('max-height', $(window).height() * 0.7); 
});

来源

2014-05-06 20:49:55

工作得很好！感谢名单！ – TodStoychev

做才能扩大Ryand的答案，如果你使用Bootstrap.ui，这对你的模式，例如将这样的伎俩：

modalInstance.rendered.then(function (result) { 
     $('.modal .modal-body').css('overflow-y', 'auto'); 
     $('.modal .modal-body').css('max-height', $(window).height() * 0.7); 
     $('.modal .modal-body').css('height', $(window).height() * 0.7); 
    });

来源

2016-03-17 17:39:19 Tiago

纯CSS解决方案，使用calc

.modal-body { 
    max-height: calc(100vh - 200px); 
    overflow-y: auto; 
}

200像素可以根据对标题&页脚的高度来调节

来源

2016-07-29 09:20:08

优秀的答案，完美的作品。请记住检查浏览器支持（http://caniuse.com/#search=calc），并非所有版本都支持它。 – Backer

我想，这个答案是基于2年前[这里]（http://stackoverflow.com/a/23324116/2091181）这篇原文。 –

儿子的....我一直在做窗口调整大小的听众在JS为*如何*长？！？我不知道“vh”单元是否存在。非常感谢！ –

我假设你希望在手机上尽可能多地使用屏幕空间。我已经做了一个插件来解决在手机上引导模式的这个用户体验问题，你可以在这里查看 - https://github.com/keaukraine/bootstrap-fs-modal

所有你需要做的就是申请modal-fullscreen类，它的行为类似于本机屏幕的iOS/Android的。

来源

2017-07-19 11:30:31 keaukraine

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

回答

相关问题