CODEWITHSUNDEEP
htmlcss
Tarasovych
Tarasovych

Reputation: 2398

display: table on mobile - height issue

I have a modal window: JSFiddle.
While browsing on mobile (OS: Android/iOS, browser: Chrome), when I open modal and scroll background page to bottom, I have next problem: when the top browser toolbar with URL input and tabs button hides, there is a white space under the modal.
enter image description here
The black wrapper on the screenshot is made by .modal-mask.

.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
  transition: opacity .3s ease;
}

And it does not fit the full window height and width. You can see white space on the bottom and on the right. So .modal-mask doesn't cover all <body>. How can I make .modal-mask always being full height and width?
By the way, there is no such problem on desktop.

P. S. My modal is centered on the page yet.

Edit 1: gif.
enter image description here

Upvotes: 0

Views: 367

Answers (1)

Samson
Samson

Reputation: 187

Try to use another unit on width and height.

CSS:

.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100vw; /* vw mean viewport width */
    height: 100vh; /* vh mean viewport height */
    background-color: rgba(0, 0, 0, .5);
    display: table;
    transition: opacity .3s ease;
}

To use viewport width/height can guarantee the overlay mask set the width and height as 100% of viewport size.

Upvotes: 2

Related Questions