使用 CSS display:flex (flexbox) 和/或 JavaScript 来制作可调整的页面

Question

我正在为类似于Karel the Dog 的教育编程语言制作一个简单的IDE。而且我在制作基本 html 页面时遇到了麻烦。

我有 4 个区域：

• 工具箱（用于打开、另存为、运行等按钮）
• Field（绘图执行器的画布，可以在场地上移动并做一些事情）
• 代码（CodeMirror 用于编写执行者命令的编辑器）
• 控制台（IDE 可以打印编译错误或运行时调试输出等消息的地方）

我在代码的每个方面都写了我想要的东西，所以我只会说现在不起作用的东西：

1. 页面应占满屏幕高度的 100%。
2. 无法设置 CodeMirror 以填充所有可用到其父高度。当它的大小大于父级的高度时，应该会出现滚动条。
3. 画布也有同样的问题 - 但仅限于垂直方向。
4. 有没有办法在代码和字段区域之间制作分隔符，可用于重新分配区域之间的水平空间？

还有一个困难。如果项目编号 4 需要 JavaScript，那么我会请求帮助我使用 WinJS 3.0 库来解决它，因为我不会仅为这个调整大小功能添加到项目中 jQuery 或其他繁重的东西。

那么，谁能帮帮我？

我将代码加载到jsfiddle.net 并粘贴到这里：

var ce = CodeMirror(document.getElementById('b-codemirror'), {
  value: "\n\n\nIt is CodeMirror element. [PARAMS ALL] " +
    "width: 100% of parent element, height: always 100% of" +
    " parent element + both scrollbars if needed\n\n\n",
  lineNumbers: true
});
var cc = document.getElementById("canvas").getContext("2d");
cc.font = "16px Helvetica";
cc.fillText("It is canvas. Can be resized from", 10, 30);
cc.fillText("JS. If it is larger than parent element,", 10, 60);
cc.fillText("corresponding scrollbar should appear.", 10, 90);

@import url("http://codemirror.net/lib/codemirror.css");

/* overriding default codemirror.css */
.CodeMirror {
  font-family: monospace;
  height: 100%;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.b-section {
  margin: 2px;
  padding: 4px;
  border-radius: 4px;
}
#b-fieldcode {
  min-height: 640px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  flex-flow: row;
}
#b-toolbox {
  background: #ffeebb;
}
#b-console {
  height: 100px;
  background: #ffeebb;
}
#b-field {
  background: #ccccff;
  overflow: auto;
  -webkit-flex: 1 1 40%;
  flex: 1 1 40%;
  -webkit-order: 1;
  order: 1;
}
#b-code {
  background: #dddd88;
  -webkit-flex: 1 1 60%;
  flex: 1 1 60%;
  -webkit-order: 2;
  order: 2;
}

@media all and (max-width: 1024px) {
  #b-fieldcode, #page {
    -webkit-flex-flow: column;
    flex-flow: column;
    flex-direction: column;
  }
  #b-code, #b-field {
    -webkit-order: 0;
    order: 0;
  }
  #b-field, #b-code {
    height: 500px;
  }
}

<script type="text/javascript" src="http://codemirror.net/lib/codemirror.js"></script>
<div id="b-toolbox" class="b-section">
  Here comes the space for buttons.
  [PARAMS ALL] width: 100% of screen, height: sized to content
</div>
<div id="b-fieldcode">
  <div id="b-field" class="b-section">
    Here comes canvas wrapper.<br />
    [PARAMS landscape] width: flex 40% of screen, height:
    100% of screen minus b-toolbox and b-console.
    <br />[PARAMS portrait] width: 100% of
    screen, height: fixed 400px.<br />
    <canvas width="300" height="300" id="canvas"
            style="background-color: green" />
  </div>
  <div id="b-code" class="b-section">
    Here comes CodeEditor wrapper.<br />
    [PARAMS landscape] width: flex 60% of screen, height:
    100% of screen minus b-toolbox and b-console.<br />
    [PARAMS portrait] width: 100% of
    screen, height: fixed 500px.
    <div id="b-codemirror"></div>
  </div>
</div>
<div id="b-console" class="b-section">
  Here comes output console.
  [PARAMS ALL] width: 100% of screen, height: fixed 120px.
</div>

Answer 1

首先，您需要拆分纵向和横向的样式。人像部分，简单易懂，略过。

对于陆地空间部分，您需要一个流动高度的标题（按钮）和一个固定高度的页脚（控制台）。这是 css flex 的典型用例——所有空闲空间都将用于主要部分。因此，您只需将 display: flex; flex-direction: column; 设置为

并将 flex: 1; 设置为主要部分（#fieldcode 在您的 sn-p 中）。

那么#field占#fieldcode宽度的40%，#code占60%。同样，您将display: flex; flex-direction: row; 设置为#fieldcode，将flex: 4; 设置为#field，将flex: 6; 设置为#code，以便#fieldcode 的备用空间以4:6 分隔。但请注意与以前的区别。是的，flex-direction 值不同。这告诉浏览器要么水平分离，要么垂直分离。

html, body {
  margin: 0;
  padding: 0;
}
#toolbox {
  background: #feb;
}
#field {
  background: #ccf;
  overflow: auto;
}
#code {
  background: #dd8;
  overflow: auto;
}
#codemirror {
  min-width: 100%;
  min-height: 100%;
}
#console {
  background: #feb;
  height: 120px;
}

@media screen and (orientation: portrait) {
  #field {
    height: 400px;
  }
  #code {
    height: 500px;
  }
}

@media screen and (orientation: landscape) {
  html, body {
    height: 100%;
  }
  body {
    display: flex;
    flex-direction: column;
  }
  #fieldcode {
    flex: 1;
    display: flex;
    flex-direction: row;
  }
  #field {
    flex: 4;
  }
  #code {
    flex: 6;
  }
}

<div id="toolbox">buttons here</div>

<div id="fieldcode">
  <div id="field">
    <canvas></canvas>
  </div>

  <div id="code">
    <div id="codemirror"></div>
  </div>
</div>

<div id="console">console here</div>