0
我試圖用響應式尺寸來創建帶有2個內部div的彈出式對話框。使用響應式造型創建彈出式對話框
我認爲我可以通過將它們的width
和height
設置爲父div的百分比來實現此目的,但它似乎不起作用。如果您調整瀏覽器窗口的大小,我的jsfiddle中的leftArea div就會脫離彈出的div。
我該如何解決這個問題?
我試圖用響應式尺寸來創建帶有2個內部div的彈出式對話框。使用響應式造型創建彈出式對話框
我認爲我可以通過將它們的width
和height
設置爲父div的百分比來實現此目的,但它似乎不起作用。如果您調整瀏覽器窗口的大小,我的jsfiddle中的leftArea div就會脫離彈出的div。
我該如何解決這個問題?
使用box-sizing: border-box;
屬性設置填充和邊界內框的寬度。
檢查更多文檔瀏覽:box-sizing - 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>