Детский элемент DOM не правильный размер

Question

Я построил тонны divs там, где есть родитель, который действует как обертка, а один из дочерних элементов будет размером с частью родителя, а затем прокрутки для переполнения, но не может получить по какой-то причине это конкретное право.

У меня есть родительский контейнер -> 1-й ребенок - это заголовок -> 2-й ребенок содержит контент и имеет размер, чтобы заполнить родительский элемент - заголовок.

У меня есть родитель, который позиционируется как абсолютный и прилагается к документу, чтобы он мог заполнить весь экран минус небольшая ширина и высота.

Когда я изменяю свой элемент содержимого для прокрутки, если превышает заданную высоту, поведение выглядит так, как будто у него нет родителя вообще, даже не document.body. Ширина отлично работает; однако нежелательное поведение происходит только для установки высоты в процентах, оно работает, если задано в пикселях. Но в этой конкретной ситуации мне нужно установить высоту в процентах из-за заполнения всего экрана, и у людей есть так много разных типов экранов с разными настройками пикселей.

Размеры чертежей blueprintsViewer правильно.

Принтер divConttainer переполняет 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%;}. Для чего вам нужно position: absolute на div # blueprintsViewer? Вместо этого используйте поля.

См. http://jsfiddle.net/QxUWW/2/