模态窗口未占用完整的 100 宽度答案

【问题标题】：Modal window not taking full 100 width模态窗口未占用完整的 100 宽度
【发布时间】：2015-10-02 07:09:59
【问题描述】：

我有一个模式窗口，我想全屏显示。我已经让它有 100% 的高度，但宽度不起作用。我试过使用 min-width: 100%;但这给了超过100％。

只需单击该 img 图标或模态按钮。我也试过了

.remodal-is-initialized {

  display:inline-block;
  width: 100%;
  height: 100%;

【问题讨论】：

标签： javascript html css modal-dialog

【解决方案1】：

将以下内容添加到您的 CSS：

.remodal {
    max-width: 100% !important;
}

Here is a JSFiddle demo

【讨论】：

【解决方案2】：

问题出在以下媒体查询中。您有一个 max-width 或 700px。删除它，它会工作。

/* Media queries
   ========================================================================== */

@media only screen and (min-width: 641px) {

    .remodal {

        max-width: 700px;

    }

}

同时删除 .remodal 类上的 padding。

.remodal {

    width: 100%;

    margin-bottom: 10px;
    /* remove padding */
    padding: 35px;
    ...

#outer div 似乎也有问题。您的内容溢出，会在右侧产生第二个滚动条。

【讨论】：

谢谢！有第二个滚动条吗？我该如何摆脱它？我应该使用溢出：隐藏； ?

【解决方案3】：

我还注意到在模态的底部有一点空白空间？我该如何摆脱它？

【讨论】：