ラッパーとして機能する親があり、子要素の1つが親の一部にサイズ変更されてからオーバーフローのためにスクロールする場所に、大量のdivを作成しましたが、何らかの理由でこの特定の1つを正しく取得できません。
親コンテナがあります->1番目の子はヘッダーです->2番目の子にはコンテンツが含まれており、親（ヘッダー）を満たすサイズになっています。
親を絶対位置に配置し、document.bodyに追加して、画面全体から幅と高さを少し引いたものを埋めることができるようにしました。
指定された高さを超えた場合にスクロールするようにコンテンツ要素のサイズを変更すると、document.bodyでさえも、親がまったくないかのように動作します。幅は完璧に機能します。ただし、望ましくない動作は、高さをパーセンテージで設定する場合にのみ発生します。ピクセル単位で設定する場合に機能します。しかし、この特定の状況では、画面全体を埋めるために高さをパーセンテージで設定する必要があり、人々はさまざまなピクセル設定のさまざまな種類の画面を持っています。
blueprintsViewerdivのサイズは正しく設定されています。
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&id=4309"><img src="/api/drawings?a=d&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をオーバーフローしています。これは、私が克服したい動作です。
------------------------------------動作中のビューアのスナップショット--------- ------------
