자식 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는

#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을 스타일링 .CSS는 화면 스냅 샷입니다.

아래의 스크린 샷은 어두운 배경이 부모 "div # blueprintsViewer"이고 div.printContainer가 div # blueprintsViewer를 오버플로하고 있으며이를 극복하고자하는 행동입니다.

------------------------------------ 작업 뷰어의 스냅 샷 ---------------------

Answer 1

불가능 이잖아. css 사양에 따르면 높이가 값을 백분율로 표시하는 것은 포함하는 블록의 높이가 명시 적으로 지정된 경우에만 가능합니다. DIV 번호 blueprintsViewer의 높이를 명시 적으로 설정하지만, 내용 높이에 의존하지 않기 때문에

, 당신의 예를 div.printContainer의 높이가 '자동'으로 계산에서

http://www.w3.org/TR/CSS21/visudet.html#the-height-property를 참조하십시오. 결과적으로 div.printContainer 높이가 내용에 맞고 스크롤 막대가 활성화되지 않습니다.

div # blueprintsViewer에 overflow: auto;을 넣을 수 있습니다. html,body{height: 100%;}을 설정하는 것을 잊지 마십시오. div # blueprintsViewer에서 position: absolute이 무엇이 필요합니까? 대신 여백을 사용하십시오.

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