Question

我试图用响应大小调整创建一个带有2个内部div的弹出窗口。

我认为我可以通过将width和height设置为父div的百分比来实现此目的，但它似乎不起作用。如果您调整浏览器窗口的大小，我的jsfiddle中的leftArea div将不在弹出窗口中。

我该如何解决这个问题？

jsfiddle

Answer 1

使用box-sizing: border-box;属性在框宽内设置填充和边框。

点击此处查看更多文档：box-sizing - CSS

＆＃13;

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;
}

＆＃13;

<div class="popup">
   <div class="leftArea"></div>
   <div class="rightArea"></div>
</div>

＆＃13;

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

1 个答案: