【发布时间】：2019-02-02 09:52:30
【问题描述】：
这是 JSFiddle：https://jsfiddle.net/chrismg12/zmbp7at3/88/。
将调整大小栏与面板一起使用时出现问题，其中包含面板标题（高度 30 像素）和面板主体（高度自动），面板本身调整大小非常好，但是面板标题和主体只会增加大小但从不减小。我在有和没有 monaco-editor 的情况下都试过了，发现这是它的问题，而不是调整大小。
我试过了
1.摆弄 panel-header 和 body 的样式。
2.我已尝试添加该行：
rightPane.childNodes[0].childNodes[0].style.width = rightPane.style.width;
rightPane.childNodes[0].childNodes[1].style.width = rightPane.style.width;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Venti</title>
<script src="https://cdn.rawgit.com/lingtalfi/simpledrag/master/simpledrag.js"></script>
<link rel="stylesheet" href="css/style2.css">
<link rel="stylesheet" href="css/titlebar.css">
</head>
<body>
<div class="title-bar">
<div class="menu-button-container">
<button
id="menu-button"
class="menu-button"
/>
</div>
<div class="app-name-container">
<p>App Name</p>
</div>
<div class="window-controls-container">
<button
id="minimize-button"
class="minimize-button"
/>
<button
id="min-max-button"
class="min-max-button"
/>
<button
id="close-button"
class="close-button"
/>
</div>
</div>
<div class="panes-container">
<div class="left-pane" id="left-pane">
</div>
<div class="panes-separator" id="panes-separator"></div>
<div class="right-pane" id="right-pane">
<div class="panel">
<div class="panel-header">TABS</div>
<div class="panel-body"><div id="editor"></div>
<link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.15.6/min/vs/editor/editor.main.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.15.6/min/vs/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.15.6/min/vs/editor/editor.main.nls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.15.6/min/vs/editor/editor.main.js"></script>
<script>
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.15.6/min/vs' }})
require(['vs/editor/editor.main'], function() {
var editor = monaco.editor.create(document.getElementById('editor'), {
value: "// Cross-browser xml parsing\nvar parseXML = function( data ) {\n var xml, tmp;\n if ( !data || typeof data !== \"string\" ) {\n return null;\n }\n try {\n if ( window.DOMParser ) { // Standard\n tmp = new DOMParser();\n xml = tmp.parseFromString( data , \"text/xml\" );\n } else { // IE\n xml = new ActiveXObject( \"Microsoft.XMLDOM\" );\n xml.async = false;\n xml.loadXML( data );\n }\n } catch( e ) {\n xml = undefined;\n }\n if ( !xml || !xml.documentElement || xml.getElementsByTagName( \"parsererror\" ).length ) {\n jQuery.error( \"Invalid XML: \" + data );\n }\n return xml;\n};\n\n// Bind a function to a context, optionally partially applying any arguments.\nvar proxy = function( fn, context ) {\n var tmp, args, proxy;\n\n if ( typeof context === \"string\" ) {\n tmp = fn[ context ];\n context = fn;\n fn = tmp;\n }\n\n // Quick check to determine if target is callable, in the spec\n // this throws a TypeError, but we will just return undefined.\n if ( !jQuery.isFunction( fn ) ) {\n return undefined;\n }\n\n // Simulated bind\n args = core_slice.call( arguments, 2 );\n proxy = function() {\n return fn.apply( context || this, args.concat( core_slice.call( arguments ) ) );\n };\n\n // Set the guid of unique handler to the same of original handler, so it can be removed\n proxy.guid = fn.guid = fn.guid || jQuery.guid++;\n\n return proxy;\n};\n\nSound.play = function() {}\nSound.prototype = { something; }\nSound.prototype.play = function() {}\nSound.prototype.play = myfunc\nvar parser = document.createElement('a');\nparser.href = \"http://example.com:3000/pathname/?search=test#hash\";\nparser.hostname; // => \"example.com\"",
language: 'javascript',
automaticLayout: true,
fontSize:18
});
});
</script></div>
</div>
</div>
</div>
<div class="footbar"></div>
</body>
</html>
这里是要使用的JS代码：
var leftPane = document.getElementById('left-pane');
var rightPane = document.getElementById('right-pane');
var paneSep = document.getElementById('panes-separator');
var leftLimit = 0;
var rightLimit = 90;
paneSep.sdrag(function (el, pageX, startX, pageY, startY, fix) {
fix.skipX = true;
if (pageX < window.innerWidth * leftLimit / 100) {
pageX = window.innerWidth * leftLimit / 100;
fix.pageX = pageX;
}
if (pageX > window.innerWidth * rightLimit / 100) {
pageX = window.innerWidth * rightLimit / 100;
fix.pageX = pageX;
}
var cur = pageX / window.innerWidth * 100;
if (cur < 0) {
cur = 0;
}
if (cur > window.innerWidth) {
cur = window.innerWidth;
}
var right = (100-cur-2);
leftPane.style.width = cur + '%';
rightPane.style.width = right + '%';
}, null, 'horizontal');
以下是预期结果：
- 调整栏的大小。
- monaco-editor 正确调整大小（可以减小和增加宽度）。
以下是实际结果：
- 调整栏的大小。
- monaco-editor 仅在面板（或右窗格）的宽度增加时调整大小，而不是在其减小时调整大小。
【问题讨论】：
标签： javascript html css