子DOM元素没有正确的大小

Question

我已经构建了大量的div，其中有一个父级作为包装器，其中一个子元素的大小将调整为父级的一部分然后滚动以进行溢出，但是不能将这个特定的一个用于某些原因。

我有一个父容器 - ＆gt;第一个孩子是标题 - ＆gt;第二个孩子包含内容，其大小可以填充父母 - 标题。

我已将父级定位为绝对并附加到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，这是我想要克服的行为。

------------------------------------工作观众的快照------ ---------------

Answer 1

那是不可能的。 css规范说，只有明确指定包含块的高度时才能以百分比形式显示高度值。

请参阅http://www.w3.org/TR/CSS21/visudet.html#the-height-property

在您的示例中，div.printContainer的高度计算为“auto”，因为div＃blueprintsViewer的高度未明确设置，但取决于内容高度。因此div.printContainer高度适合其内容，因此没有活动的滚动条。

但你可以把overflow: auto;放在div＃blueprintsViewer中。不要忘记设置html,body{height: 100%;}。你在div＃blueprintsViewer上需要什么position: absolute？改为使用边距。

请参阅http://jsfiddle.net/QxUWW/2/