时间戳

首页 > 解决方案 > 更改屏幕/窗口高度时如何使弹出模式内部元素div调整大小？

html - 更改屏幕/窗口高度时如何使弹出模式内部元素div调整大小？

问题描述

我的弹出模式在两个不同的屏幕中显示如下：

在此处输入图像描述

在此处输入图像描述

第一张图片代表了我希望事物如何出现。第二张图片发生在我更改浏览器窗口的高度时。这是此弹出窗口的代码和 css：

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

    <div class="modal-content animated fadeIn">
        <span class="close" onclick="closeModal()">&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。我怎样才能避免这种情况发生？当窗口更小时，我希望弹出窗口保持相同的高度，然后添加一个滚动条。

标签： htmlcss

解决方案

您的高度设置为 75%，如果您希望 .modal-content div 扩展以填充父 div，请将其更改为 auto，这将根据需要添加滚动条。

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

如果您只希望模态框为 75% 应该能够将高度添加到父容器，目前，您已将此设置为自动，将其更改为 %。

推荐阅读