此处提供的代码在chrome，safari和android浏览器中运行良好。 我认为它可能并非在所有现代浏览器中完全不变。 我要求仔细审查，以便在大多数浏览器中将其强化为完全可靠。
我最终的目标是将其变成一个基础 一次性角色聊天应用，其中当前用户始终是底部窗口 顶窗是与你聊天的人。
我用两个莎士比亚十四行诗作为内容来说明 窗口在首次加载然后调整大小时的行为方式 无论是非常小还是全宽。
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="even window split" />
<meta name="description" content="even window split and scrolling content" />
<title>even window split and scrolling content</title>
<style>
div { border-collapse:collapse; }
body { background-color:saddlebrown; }
</style>
<script type="text/javascript">
function hDoc(f) { return f.toString().replace(/.*\/\*([^\*]*).\/.*/, '$1'); }
labelA = hDoc(function() {/* Shakespeare sonnet CXVI: */});
verseA = hDoc(function() {/* <pre>
Let me not to the marriage of true minds
Admit impediments. Love is not love
Which alters when it alteration finds,
Or bends with the remover to remove:
O, no! it is an ever-fixed mark,
That looks on tempests and is never shaken;
It is the star to every wandering bark,
Whose worth's unknown, although his height be taken.
Love's not Time's fool, though rosy lips and cheeks
Within his bending sickle's compass come;
Love alters not with his brief hours and weeks,
But bears it out even to the edge of doom.
If this be error and upon me proved,
I never writ, nor no man ever loved.
</pre> */});
labelB = hDoc(function() {/* Shakespeare sonnet CX: */});
verseB = hDoc(function() {/* <pre>
Alas! 'tis true, I have gone here and there,
And made my self a motley to the view,
Gored mine own thoughts, sold cheap what is most dear,
Made old offences of affections new;
Most true it is, that I have looked on truth
Askance and strangely; but, by all above,
These blenches gave my heart another youth,
And worse essays proved thee my best of love.
Now all is done, have what shall have no end:
Mine appetite I never more will grind
On newer proof, to try an older friend,
A god in love, to whom I am confined.
Then give me welcome, next my heaven the best,
Even to thy pure and most most loving breast.
</pre> */});
function resize() {
var w = window.innerWidth , h = window.innerHeight;
var h2 = Math.round(h/2 - 2) , ht = 8;
var ww = Math.round(w - 2) , hh = Math.round(h2-ht- 2);
var ut = Math.round( ht+ 2) , ub = Math.round(ut+hh );
var lt = Math.round(ub+ht+ 2) , lb = h;
var black = '000' , white = 'FFF';
style0 = 'div { overflow-y: scroll; margin-bottom: 1px; }\n';
styleA = '#verseA{';
styleA += 'border:' + '1px solid black;';
styleA += 'width:' + ww + 'px;' ;
styleA += 'height:' + hh + 'px;' ;
styleA += 'position:' + 'absolute;' ;
styleA += 'top:' + ut + 'px;' ;
styleA += 'bottom:' + ub + 'px;' ;
styleA += 'left:' + '0px;' ;
styleA += 'right:' + '0px;' ;
styleA += 'background-color:#' + black + ';' ;
styleA += 'color:#' + white + ';' ;
styleA += '}\n';
styleB = '#verseB{';
styleB += 'border:' + '1px solid black;';
styleB += 'width:' + ww + 'px;' ;
styleB += 'height:' + hh + 'px;' ;
styleB += 'position:' + 'absolute;' ;
styleB += 'top:' + lt + 'px;' ;
styleB += 'bottom:' + lb + 'px;' ;
styleB += 'left:' + '0px;' ;
styleB += 'right:' + '0px;' ;
styleB += 'background-color:#' + white + ';' ;
styleB += 'color:#' + black + ';' ;
styleB += '}\n';
shown0 = '<style type="text/css">\n'+ style0 + styleA + styleB +'</style>';
shownA = '\n<div id="verseA"><pre>';
shownA += '\n<div id="headerA"><b id="labelA">' + labelA + '</b></div>\n';
shownA += verseA;
shownA += '\n</pre></div>';
shownB = '\n<div id="verseB"><pre>';
shownB += '\n<div id="headerA"><b id="labelA">' + labelB + '</b></div>\n';
shownB += verseB;
shownB += '\n</pre></div>\n';
document.getElementById("demo").innerHTML = shown0 + shownA + shownB;
}
window.addEventListener("resize", resize);
</script>
</head>
<body onLoad="resize()" onResize="resize()"><div id="demo"></div></body>
</html>