html - 子 DOM 元素大小不正确

Question

我已经构建了大量的 div，其中有一个作为包装器的父元素，其中一个子元素将调整为父元素的一部分，然后滚动以溢出，但由于某种原因无法获得这个特定的权利。

我有一个父容器->第一个孩子是标题->第二个孩子包含内容并且大小可以填充父容器-标题。

我已经将父级定位为绝对并附加到 document.body 以便它可以填充整个屏幕减去一点宽度和高度。

当我调整我的内容元素的大小以在超过给定高度时滚动时，行为就好像它根本没有父级，甚至没有 document.body。宽度完美；但是，仅在将高度设置为百分比时才会发生不良行为，如果以像素为单位设置则有效。但是在这种特定情况下，由于填充了整个屏幕，我需要以百分比设置高度，而且人们有很多不同类型的屏幕，具有不同的像素设置。

blueprintsViewer div 大小正确。

printContainer div 溢出 blueprintsViewer 并超过屏幕高度。行为与我没有正确设置它的位置或它的父位置一样。

<div id="blueprintsViewer" style="max-width: 98.75%; max-height: 98%;">

  <div class=" blueprintsHead"><span class=" rndClose" title="Close"></span><a class=" acLink" title="Append door schedule">Door schedule</a></div>

  <div class=" printContainer" style="max-height: 75%;"><img src="/api/drawings a=e&amp;id=4309"><img src="/api/drawings?a=d&amp;id=4309"></div>

</div>

--这是.css样式

   #blueprintsViewer {
    position: absolute;
    top: 5px;
    left: 10px;
    padding: 10px;
    height:auto;
    overflow:visible;
    background-color: rgba(45, 45, 45, 0.65);
    border-radius: 5px;
    -moz-border-radius: 5px;
    z-index: 20001;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-box-shadow: 0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5);
    -moz-box-shadow: 0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5);
    box-shadow: 0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5);

}

   .blueprintsHead {
        width: 100%;
        height: 40px;
        position:relative;
        /*cursor: move;*/
        padding: 2px;
        background-color: #fff;
        border-bottom: 2px groove #39c;
        background-image: url(in25.png);
        background-repeat: no-repeat;
        background-position: 5px center;
        text-align: right;
        border-top-right-radius: 3px;
        border-top-left-radius: 3px;
        -moz-border-radius-topleft: 3px;
        -moz-border-radius-topleft: 3px;
    }

        .blueprintsHead > a {
            text-decoration: underline;
            margin-right: 4em;
            margin-top: 1em;
            padding: .2em;
            display:block;
            width:80px;
        }
    .blueprintsHead >span.rndClose {zoom:1.4 !important; top:5px;right:5px;}
    #blueprintsViewer img {
        margin-bottom:10px;
    }

    #blueprintsViewer .printContainer {
        position: relative;
        margin: 5px;
        margin-left:-1px;
        width: 100%;
        overflow:scroll;
    }

--这是一个屏幕快照。

在较暗背景下方的屏幕截图中，父级“div#blueprintsViewer”和 div.printContainer 溢出了 div#blueprintsViewer，这是我想要克服的行为。

溢出的屏幕快照