ウィンドウ内にdivを垂直に収縮させる

Question

現在のウィンドウに収まるようにウィンドウを縮小したい。このFiddleは私が達成したいものに非常に近いです。それを使用するには、青い線が途切れるまで出力ウィンドウのサイズを単純に変更します。その後、プロセスを逆にします。しかし、ページにパディングやその他の要素があっても、引き続き作業したいと思っています。

<div id="output"></div> 

<div id="sample" class="sampleClass"> 
    <div>hello</div> 
    <div>hello</div> 
    <div>hello</div> 
    <div>hello</div> 
    <div>hello</div> 
    <div>hello</div> 
</div> 

window.addEventListener("resize", updateDimensions); 


var originalHeight = document.getElementById('sample').offsetHeight; 
var safeBuffer = 15; 

function updateDimensions(){ 
    var node = document.getElementById('sample'); 
    var windowDimensions = {width: window.innerWidth, height: window.innerHeight}; 
    var dimensions = node.getBoundingClientRect(); 
    var nodeBottom = dimensions.bottom; 
    var nodeHeight = node.offsetHeight; 

    var nodeTop = dimensions.top; 
    var windowHeight = windowDimensions.height; 

    var windowIsCutOff = windowHeight <= nodeBottom; 
    var windowIsShowing = windowHeight >= nodeTop; 

    console.log('windowHeight: ' + windowHeight + ' safeBuffer: ' + safeBuffer); 
    console.log('nodeHeight: ' + nodeHeight + ' originalHeight: ' + originalHeight); 
    var nodeCanGrowBigger = (windowHeight - safeBuffer - 10) > nodeHeight && nodeHeight < originalHeight; 
    console.log('nodeCanGrowBigger: ' + nodeCanGrowBigger); 

    if(windowIsShowing && windowIsCutOff) { 
    console.log('do work'); 
    shrinkWindow(nodeBottom, windowHeight, nodeHeight); 
    } 

    if(nodeCanGrowBigger){ 
    growWindow(nodeBottom, windowHeight, nodeHeight); 
    } 
} 

function growWindow(nodeBottom, windowHeight, nodeHeight){ 
    var node = document.getElementById('sample'); 
    var originalHeight = nodeHeight; 
    var offset = nodeHeight - windowHeight; 
    var newHeight; 
    if(offset >= -safeBuffer && offset <= safeBuffer){ 
    newHeight = originalHeight; 
    } 
    else if(offset >= 0){ 
    newHeight = originalHeight + offset; 
    console.log('positive calculation originalHeight: ' + originalHeight + ' offset: ' + offset + ' for newHeight: ' + newHeight); 
    }else{ 
    newHeight = originalHeight - offset; 
    console.log('negative', newHeight); 
    } 
    node.style.height = newHeight + 'px'; 
    console.log('height attmpted changed to', newHeight); 
    console.log('height offset', node.offsetHeight); 
    console.log('height style', node.style.height); 
} 

function shrinkWindow(nodeBottom, windowHeight, nodeHeight) { 
    var node = document.getElementById('sample'); 
    var originalHeight = nodeHeight; 
    //console.log('originalHeight', originalHeight); 
    //console.log('nodeBottom:' + nodeBottom + ' windowHeight: ' + windowHeight); 
    var offset = nodeHeight - windowHeight; 
    //console.log('offset', offset); 
    var newHeight; 
    if(offset >= -safeBuffer && offset <= safeBuffer){ 
    newHeight = originalHeight - (safeBuffer + 1); 
    } 
    else if(offset >= 0){ 
    newHeight = originalHeight - offset; 
    //console.log('positive calculation originalHeight: ' + originalHeight + ' offset: ' + offset + ' for newHeight: ' + newHeight); 
    }else{ 
    newHeight = originalHeight + offset; 
    //console.log('negative', newHeight); 
    } 
    node.style.height = newHeight + 'px'; 
    /* 
    console.log('height attmpted changed to', newHeight); 
    console.log('height offset', node.offsetHeight); 
    console.log('height style', node.style.height); 
    */ 
} 


.sampleClass { 
padding: 0px; 
height: 300px; 
overflow-y: auto; 
border: solid blue; 
//margin: 10px 300px 10px 25px; 
margin: 0px 
position: 'relative' 
} 

私が思いついたこのJavaScriptソリューションは、過度に複雑に感じます。パディングのようなものや、ページ上のより多くのコンテンツについては解決しません。普通の古いCSSやJS拡張でこの問題を解決できますか？

私はKendo uiが（少なくとも私たちが使用する5歳のバージョンでは）モーダルウィンドウでこの効果があることを知っています。私は剣道を使うのにはオープンしていません。

Answer 1

これはあなたの状況ではうまくいくとは言い難い...次のタッチアップを見てください。これは、より多くの仕事を使用することができますが、私はそれが私が向かっていた方向にあなたを指すようになると思う：

function updateDimensions(){ 
    var node = document.getElementById('sample'); 
    var windowDimensions = {width: window.innerWidth, height: window.innerHeight}; 
    var dimensions = node.getBoundingClientRect(); 
    var nodeBottom = dimensions.bottom; 
    var nodeHeight = node.offsetHeight; 

    var nodeTop = dimensions.top; 
    var windowHeight = windowDimensions.height; 

    var windowIsCutOff = windowHeight <= nodeBottom; 
    var windowIsShowing = windowHeight >= nodeTop; 

    console.log('windowHeight: ' + windowHeight + ' safeBuffer: ' + safeBuffer); 
    console.log('nodeHeight: ' + nodeHeight + ' originalHeight: ' + originalHeight); 
    var nodeCanGrowBigger = (windowHeight - safeBuffer - 10) > nodeHeight && nodeHeight < originalHeight; 
    console.log('nodeCanGrowBigger: ' + nodeCanGrowBigger); 

    if ((windowIsShowing && windowIsCutOff) || nodeCanGrowBigger) { 
    growWindow(nodeTop, windowHeight, nodeHeight); 
    } 
} 

function growWindow(nodeTop, windowHeight, nodeHeight){ 
    var node = document.getElementById('sample'); 
    var offset = windowHeight - (nodeTop + nodeHeight + safeBuffer); 
    var newHeight = nodeHeight + offset; 
    node.style.height = newHeight + 'px'; 
} 

あなたが見ることができるように、私は計算のためにnodeTopの代わりnodeBottomを使用して、私はnodeTop、nodeHeightの組み合わせを使用しましたノードの下部を示すためにsafeBufferを使用し、そのオフセットとのウィンドウとの差を使用します。これは、ウィンドウを縮小するか拡大するかにかかわらず動作します。

Answer 2

これは剣道UIのような最もversion次のとおりです。代わりに、高さの

window.addEventListener("resize", updateDimensions); 

var node = document.getElementById('sample'); 
var style = node.currentStyle || window.getComputedStyle(node); 
var marginTop = style.marginTop.replace("px", ""); 
marginTop = parseInt(marginTop, 10); 
var innerNode = document.getElementById('inner'); 
var innerNodeStyle = innerNode.currentStyle || window.getComputedStyle(innerNode); 
var innerMarginTop = innerNodeStyle.marginTop.replace("px", ""); 
innerMarginTop = parseInt(innerMarginTop, 10); 
var innerMarginBottom = innerNodeStyle.marginBottom.replace("px", ""); 
innerMarginBottom = parseInt(innerMarginBottom, 10); 
var totalInnerMarginSize = innerMarginTop + innerMarginBottom; 
var safeBuffer = 0; 
//if(marginTop < 20){ 
    safeBuffer = 20; 
//} 
var originalHeight = node.offsetHeight + marginTop + safeBuffer; 


function updateDimensions(){ 
    var windowDimensions = {width: window.innerWidth, height: window.innerHeight}; 
    var dimensions = node.getBoundingClientRect(); 
    //console.log('totalInnerMarginSize: ' + totalInnerMarginSize); 
    var cutoffPoint = marginTop + node.offsetHeight + safeBuffer + totalInnerMarginSize ; 
    var nodeTop = dimensions.top; 
    var innerNodeDimensions = innerNode.getBoundingClientRect(); 
    var innerNodeTop = innerNodeDimensions.top; 
    var innerNodeHeight = innerNodeDimensions.height; 
    //console.log('innerNodeHeight: ' + innerNodeHeight); 
    var windowHeight = windowDimensions.height; 
    console.log('windowHeight: ' + windowHeight + ' cutoffPoint: ' + cutoffPoint); 
    var windowIsCutOff = windowHeight <= cutoffPoint; 
    //console.log('windowHeight: ' + windowHeight + ' nodeTop: ' + nodeTop); 
    var windowIsShowing = windowHeight > nodeTop; 


    var nodeCanGrowBigger = windowHeight > cutoffPoint && cutoffPoint < originalHeight; 
    //console.log('nodeCanGrowBigger: ' + nodeCanGrowBigger); 
    //console.log('windowHeight: ' + windowHeight + ' cutoffPoint: ' + cutoffPoint 
       //+ ' originalHeight: ' + originalHeight); 

    //console.log('windowIsShowing: ' + windowIsShowing + ' windowIsCutOff: ' + windowIsCutOff + ' nodeCanGrowBigger: ' + nodeCanGrowBigger); 
    if ((windowIsShowing && windowIsCutOff) || nodeCanGrowBigger) { 
    resizeWindow(innerNodeHeight, windowHeight, cutoffPoint); 
    } 
} 

function resizeWindow(innerHeight, windowHeight, cutoffPoint){ 
    //console.log('innerHeight: ' + innerHeight + ' windowHeight: ' + windowHeight 
       //+ ' cutoffPoint: ' + cutoffPoint); 

    var newHeight = innerHeight - (cutoffPoint - windowHeight); 
    innerNode.style.height = newHeight + 'px'; 
} 

<div id="output"></div> 

<div id="sample" class="sampleClass"> 
    <h1> 
    Header 
    </h1> 
    <div id="inner"> 
     <div>hello</div> 
     <div>hello</div> 
     <div>hello</div> 
     <div>hello</div> 
     <div>hello</div> 
     <div>hello</div> 
    </div> 
    <h1> 
    footer 
    </h1> 
</div> 

.sampleClass { 
padding: 10px; 
//height: 300px; 
overflow-y: auto; 
border: solid blue; 
//margin: 10px 300px 10px 25px; 
margin: 70px; 
position: 'relative' 
} 

#inner{ 
    position: 'relative'; 
    overflow-y: auto; 
    border: solid red 1px; 
}