模态窗口不占用100宽度

Question

我有一个模态窗口，我想全屏显示。我有它有100％的高度，但宽度不起作用。我尝试过使用min-width：100％;但这超过了100％。

https://jsfiddle.net/k5adr0wc/

只需点击img图标或模态按钮即可。我也试过了

.remodal-is-initialized {

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

Answer 1

The problem is in the following media query. You have a max-width of 700px. Remove it and it will work.

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

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

    .remodal {

        max-width: 700px;

    }

}

Also remove the padding on the .remodal class.

.remodal {

    width: 100%;

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

There also seems to be a problem with the #outer div. You have overflowing content which produces a second scroll-bar on the right.

Answer 2

Add the following to your CSS:

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

Here is a JSFiddle demo

Answer 3

我也注意到在模态的底部有一个空隙的小差距？我该如何摆脱它？