有關的寬度和高度

CSS困惑CSS有關的寬度和高度

 .modalDialog { 
      position: fixed; 
      top: 0; 
      bottom: 0; 
      left: 0; 
      right: 0; 
      opacity: 0; 
      z-index: 99999; 
      width: 100%; 
      height: 100%; 
      font-family: Arial, Helvetica, sans-serif; 
      background: rgba(0, 0, 0, 0.1); 
      pointer-events: none; 
     } 


     .modalDialog:target { 
      opacity: 1; 
      pointer-events: auto; 
     } 


     .modalDialog > div { 
      width: 400px; 
      position: relative; 
      margin: 10% auto; 
      padding: 5px 20px 13px 20px; 
      border-radius: 10px; 
      background: #ffa; 
     }

爲什麼高度和寬度設置爲100％取整文檔空間，而不是其父是div.X

我能有人解釋

.modalDialog { 
     width: 100%; 
     height: 100%; 
    }

也給JS小提琴https://jsfiddle.net/atmgtm/y6grhv56/

來源

2016-07-26 user2977259

因爲'position：fixed'？ – Siguza

謝謝。我不知道。只針對可能看到此帖子的人。答案是「position：fixed使元素相對於視口而不是它的offsetParent」 – user2977259

鏈接刪除屬性position:fixed;，或改變它，它應該工作。一定要小心CSS位置屬性，它可能是危險的，並可能導致不良結果。 您已被警告

來源

2016-07-26 21:43:14

有關的寬度和高度

回答

相關問題