CSS 100％使用填充

Question

我正在尝试将叠加div放入其父级边框内。 它适用于它下面的iframe。不是顶部的蓝色div。

#screenoverlay {
    position: absolute;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin-top: 30px;       
    margin-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;

    background-color: blue;
    opacity: 0.3;
    z-index: 1;
}

Answer 1

#screenoverlay {
    position: absolute;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    width: calc(100% - 60px); /* 30px + 30px = 60px negate this from total width, this take care of your div position to be in parent div */
    height: calc(100% - 60px); /* 30px + 30px = 60px negate this from total height, this take care of your div position to be in parent div */
    margin-top: 30px;   
    margin-left: 30px; 
    margin-right: 30px;
    margin-bottom: 30px;

    /* margin : 30px; you can club all above in shorthand */

    background-color: blue;
    opacity: 0.3;
    z-index: 1;
}

如果你有

body {
    margin: 0;
    padding: 0;
}

正如position: absolute所示，您可以使用top，left，right，bottom代替使用margin

#screenoverlay {
    position: absolute;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    top: 30px;     
    left: 30px;   
    right: 30px;
    bottom: 30px;


    background-color: blue;
    opacity: 0.3;
    z-index: 1;
}