子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> 

--Here是的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; 
    } 

--Here是一个屏幕快照。

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

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

Answer 1

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

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

在您的例子div.printContainer的高度计算为“自动”，因为DIV＃blueprintsViewer的高度没有明确设置，而是取决于内容的高度。因此，div.printContainer高度适合其内容，因此没有滚动条处于活动状态。

但是，您可以将overflow: auto;放在div＃blueprintsViewer中。不要忘记设置html,body{height: 100%;}。对于div＃blueprintsViewer需要什么position: absolute？改用边距。

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