调整大小时，右侧 div 的边距应与左侧 textarea 宽度匹配

Question

在调整左侧<textarea>（带有右下角调整区域）的大小时，如何让右侧<div> 的边距自动匹配<textarea> 的宽度？

* { margin: 0; padding: 0; }
#a {  width: 50%; resize: horizontal; height: 100%; position: fixed; }
#b { margin-left: 50%; }

<textarea id="a">hello</textarea>
<div id="b">h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h</div>

注意：左侧 textarea 应始终占据浏览器高度的 100%（始终显示编辑器），而右侧 div 可以具有非常长的高度（要滚动的页面很多）。

---

编辑：这几乎有效：

$('#a').data('x', $('#a').outerWidth()).mousemove(function () {
        if ($('#a').outerWidth() != $('#a').data('x')) {
            $('#b').css('margin-left', $('#a').outerWidth());
            $('#a').data('x', $('#a').outerWidth());
        }
    });

* { margin: 0; padding: 0; }
#a {  width: 50%; resize: horizontal; height: 100%; position: fixed; }
#b { margin-left: 50%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<textarea id="a">hello</textarea>
<div id="b">h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h</div>

但是如果你点击 textareas 的大小调整区域，然后将鼠标拖出浏览器窗口（或者如果你将窗口拖到浏览器的控制台面板上），它就不起作用)。

Answer 1

我认为 position: fixed 不可能做到这一点 - 你可以将所有内容放在一个弹性容器中并将 textarea 设置为 height: 100vh。尝试运行下面的 sn-p。

* {
  margin: 0;
  padding: 0;
}
#flex {
  display: flex;
}
#a {
  width: 50%;
  resize: horizontal;
}

<div id='flex'>
  <textarea id="a">hello</textarea>
  <div id="b">h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h</div>
</div>

Answer 2

这应该有效：

var a_width = $("#a").outerWidth();
    $("#a").mouseup(function () {
    	if (a_width != $("#a").outerWidth()) {
    		a_width = $("#a").outerWidth();
    		$("#b").css( { marginLeft : a_width });
    	}
    });