Проблемы с переполнением с центрированным всплывающим окном на маленьком экране

Question

Я пытаюсь создать всплывающее окно в своем приложении, и мне нужно центрировать его по вертикали. Я НЕ знаю высоту всплывающего окна, поэтому я не могу жестко кодировать любые значения.

Я экспериментировал со следующим кодом: Centering in the Unknown

Пока центрирование работает отлично, но есть проблема. Мои всплывающие окна имеют фиксированную ширину (и они не реагируют), поэтому моя цель заключается в том, что ширина окна меньше ширины всплывающего окна, должен появиться горизонтальный scroolbar.

С высоким разрешением центрирования работает отлично:

Но когда разрешение окна ниже всплывающее разрешения, это происходит: (Фактическое всплывающее окно перемещаются под видовым)

.block { 
 
    text-align: center; 
 
    background: #c0c0c0; 
 
    border: #a0a0a0 solid 1px; 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
} 
 
.block:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 
.centered { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 500px; 
 
    padding: 10px 15px; 
 
    border: #a0a0a0 solid 1px; 
 
    background: #f5f5f5; 
 
}

<div class="block"> 
 
    <div class="centered"> 
 
    <h1>Some text</h1> 
 
    <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p> 
 
    </div> 
 
</div>

Answer 1

Насколько я знаю, что это не можно вызвать полосу прокрутки с позицией фиксированного элементом, но есть способ предотвратить всплывающее окно транспортируемого в окне просмотра, мы можем использовать трюки размера шрифта, установить font-size:0; на контейнер и font-size:16px; или около того на внутренней коробке, прочтите это для более - https://stackoverflow.com/a/5078297/483779 Затем смените фиксированный width на max-width, чтобы сделать его отзывчивым, снова нет полосы прокрутки.

Updated Demo

Я также добавил несколько других подходов. один будет держать содержимое окна всегда оставаться посередине. 2nd один ведет себя аналогично вашей текущей демонстрации. И 3rd сможет запускать полосу прокрутки, но использует абсолютное положение.

Подход 1: с использованием CSS3 transform, поддержка браузера IE9 +.

JsFidde Demo

.wrapper { 
 
    text-align: center; 
 
    background: #c0c0c0; 
 
    border: #a0a0a0 solid 1px; 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
} 
 
.centered { 
 
    width: 500px; 
 
    padding: 10px 15px; 
 
    border: #a0a0a0 solid 1px; 
 
    background: #f5f5f5; 
 
    
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    -ms-transform: translate(-50%, -50%); 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
}

<div class="wrapper"> 
 
    <div class="centered"> 
 
     <h1>Some text</h1> 
 
     <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p> 
 
    </div> 
 
</div>

подход 2: с использованием макета CSS таблицы, он должен работать на IE8 +. Примечание. В разметку добавлен дополнительный <div>.

JsFiddle Demo

.wrapper { 
 
    text-align: center; 
 
    background: #c0c0c0; 
 
    border: #a0a0a0 solid 1px; 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.centered { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.content { 
 
    max-width: 500px; 
 
    padding: 10px 15px; 
 
    border: #a0a0a0 solid 1px; 
 
    background: #f5f5f5; 
 
    margin: auto; 
 
}

<div class="wrapper"> 
 
    <div class="centered"> 
 
     <div class="content"> 
 
      <h1>Some text</h1> 
 
      <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p> 
 
     </div> 
 
    </div> 
 
</div>

Подход 3: Использование абсолютного положения, для запуска прокрутки, когда окно просмотра меньше, чем поле контента, изменить position:relative к absolute

JsFiddle Demo

.wrapper { 
 
    text-align: center; 
 
    background: #c0c0c0; 
 
    border: #a0a0a0 solid 1px; 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    display: table; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.centered { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.content { 
 
    width: 500px; 
 
    padding: 10px 15px; 
 
    border: #a0a0a0 solid 1px; 
 
    background: #f5f5f5; 
 
    margin: auto; 
 
}

<div class="wrapper"> 
 
    <div class="centered"> 
 
     <div class="content"> 
 
      <h1>Some text</h1> 
 
      <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p> 
 
     </div> 
 
    </div> 
 
</div>