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

Question

When resizing the left <textarea> (with the bottom-right-corner resize area), how to have the right <div> 's margin automatically match the <textarea> 's width?

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

Note: the left textarea should always take 100% of the browser height (always displayed editor), whereas the right div can have a very long height (many pages to be scrolled).

---

Edit: this nearly works:

 $('#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> 

but it doesn't work if you click down on the textareas's resizing area, and then drag the mouse out of the browser window (or if you drag the window over the console panel of the browser).

Answer 1

I don't think this is possible with position: fixed - you could put everything in a flex container and set the textarea to height: 100vh . Try running the snippet below.

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

This should work:

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