Как изменить размер всплывающего модального внутреннего элемента div при изменении экранов / высоты окна?

#html #css

#HTML #css

Вопрос:

У меня есть всплывающее модальное окно, которое отображается так на двух разных экранах:

Первое изображение представляет, как я хочу, чтобы все выглядело. Вторые изображения появляются, когда я меняю высоту окна моего браузера. Вот код и CSS для этого всплывающего окна:

   <div id="myModal" class="modal">

    <div class="modal-content animated fadeIn">
        <span class="close" onclick="closeModal()">amp;times;</span>
        <div id="header" class="headerClass"></div>
        <div id="myDiv" class="added">

        </div>
        <div id="buttons" class="buttonsClass"></div>

    </div>

CSS:

  .modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: auto; /* Full width */
height: auto; /* Full height */
overflow: auto; /* Enable scroll if needed */
}
.modal {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
margin-bottom:auto;

}
/* Modal Content */
.modal-content {

background-color: #fefefe;
margin: auto;
padding: 40px;
border: 1px solid #888;
width: 80%;
height: 75%;
}
  #myDiv {
width: 90%;
overflow-x: auto;
display: flex;
position: relative;
margin-top: 100px;

padding: 15px;
 }

#myDiv — это div, в котором представлены эти три прямоугольника.
Как я могу избежать этого?
Когда window меньше, я хочу, чтобы всплывающее окно оставалось с той же высотой, а затем просто добавляло scroolbar.

1. кажется, что ваш модальный размер меняется, возможно, вам следует добавить % для margin-top: 100px; в текущем виде поле будет уменьшать три зеленых прямоугольника на 100 пикселей независимо от размера.

2. У меня есть кое-что в моем коде, чтобы справиться с этим, когда я подписываюсь на события окна через сервис (то есть код angular). Может быть способ подписаться на события изменения размера окна и изменить положение на его основе, но это может быть излишним

3. Я думаю, что есть более простой способ, но тогда вам все равно. Я постараюсь провести некоторые исследования по этому поводу

4. @Simon, что вы имеете в виду, добавляя ровно %?

5. Я добавил ответ с примером кода.

Ответ №1:

Ваша высота установлена на 75%, измените ее на auto, если вы хотите, чтобы .modal-content div расширялся, чтобы заполнить родительский div, затем это добавит полосы прокрутки, как вы хотите.

 .modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 40px;
  border: 1px solid #888;
  width: 80%;
  height: auto;
}

Если вы хотите, чтобы модальное значение составляло только 75%, вы должны иметь возможность добавлять высоту к родительскому контейнеру, в настоящее время у вас установлено значение auto, измените его на %.

1. Когда я добавил это, ничего не изменилось

2. вы хотите, чтобы он оставался той же высоты? в настоящее время для .modal-content установлено значение 75%?

3. у вас также есть padding-top: 100px; / * Расположение поля * / удалите или измените это на %

4. Это помогло. Я просто изменил высоту в.model-content на auto, и это решило мою проблему. Спасибо. Может быть, вы можете отредактировать свой ответ, чтобы я мог пометить его как решение

5. Я скорректировал ответ и добавил еще несколько деталей.