Question

调整左侧<textarea>的大小（右下角调整大小区域）时，如何使<div>的右边距自动匹配{{1}宽度？

＆＃13;

<textarea>

＆＃13;

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

＆＃13;

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

修改：此近乎有效：

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

但如果您点击textareas的调整区域然后将鼠标拖出浏览器窗口（或者如果您将窗口拖过窗口），它就无法工作浏览器的控制台面板。）

Answer 1

我认为position: fixed无法做到这一点 - 您可以将所有内容放在Flex容器中，并将textarea设置为height: 100vh。尝试运行下面的代码段。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这应该有效：

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

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

2 个答案: