创建具有响应样式的弹出窗口

Creating a popup with responsive styling

本文关键字：窗口 样式 响应 创建      更新时间：2023-09-26

我正在尝试创建一个弹出窗口，其中包含2个具有响应大小的内部div。

我想我可以通过将它们的width和height设置为父div的百分比来实现这一点，但这似乎不起作用。如果你调整浏览器窗口的大小，我的jsfiddle中的leftAreadiv会从弹出的div中掉出来

我该怎么解决这个问题？

jsfiddle

使用box-sizing: border-box;属性设置框宽度内部的填充和边框

点击此处查看更多文档：方框大小-CSS

body {
   background-color: black;
}
.popup {
   position: absolute;
   margin: 0 auto;
   width: 80vw;
   height: 10vh;
   left: 0%;
   right: 0%;
   top: 50%;
   display: block;
   background-color: orange;
   border: 2px solid white;
   border-radius: 15px;
}
.leftArea {
   position: relative;
   float: left;
   width: 85%;
   height: 98%;
   margin: 0px;
   background-color: red;
   border-radius: 14px 0px 0px 14px; 
   border: 0px;
   padding-left: 10px;
   padding-right: 10px;
   box-sizing: border-box; /* Use this property to set the padding inner */
   display: inline-block;
   text-align: left;
  
}
.rightArea {
   position: relative;
   float: right;
   width: 12.25%;
   height: 100%;
   background-color: #123456;
   margin: 0px;
   display: inline-block;
   border-radius: 0px 14px 14px 0px; 
   border: 0px;
}
<div class="popup">
   <div class="leftArea"></div>
   <div class="rightArea"></div>
</div>

相关文章：