使用第一行作为表头 (CSS) 时允许在第二行中滚动

Question

我将 Ace 编辑器嵌入到 Chrome 弹出窗口中。我试图保持文本（第一行）始终可见，然后让编辑器填充屏幕的其余部分。然而，我几乎实现了这一点，正如您在屏幕截图中看到的那样，显示了一个垂直滚动条，因为您必须向下滚动主窗口才能看到编辑器的底部（水平滚动条所在的位置）。因此，突出显示的水色文本不再可见。需要实现什么 CSS 以保持第一行始终在顶部可见，同时能够在编辑器中垂直和水平滚动而不需要在父窗口中滚动？

我尝试做一些与 JSFiddle 中显示的稍有不同的事情。 http://jsfiddle.net/rvq62hzp/3/

代码

HTML

  <div class="source_table">
      <div class="source_table_row" style="background-color: aqua;">
        <div>
          <p>Text</p>
          <br/>
          <p>Text</p>
        </div>
      </div>
      <div class="source_table_row" style="background-color: blueviolet;">
        <pre id="editor"></pre>
      </div>
  </div>

CSS

body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
  font-weight: 400;
  min-width: 250px;
  padding: 0;
  margin: 0;
}
p {
  display: unset;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.source_table {
  display: table;
}
.source_table_row {
  display: table-row;
}
.ace_editor {
  position: absolute !important;
  /*border: 1px solid lightgray;*/
  margin: auto;
  height: 100%;
  width: 100%;
}

JavaScript

editor = ace.edit("editor");
editor.setTheme("ace/theme/textmate");
editor.session.setMode("ace/mode/html");
editor.setOptions({
    hScrollBarAlwaysVisible: true,
    vScrollBarAlwaysVisible: true
});
editor.session.setValue(code);

Ace Editor

Answer 1

很难回答您的问题，因为不清楚示例的哪些部分对您的设计至关重要，哪些可以更改。

如果可以用display flex代替table，那么解决方法很简单：设置source_table的高度填满整个窗口，设置ace editor的父级有flex:1和position:relative

var editor = ace.edit("editor");
editor.session.setUseWorker(false);
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");

body {
  margin: 0
}

.source_table {
  display: flex;
  flex-direction: column;
  height: 100vh;
  bacground: red
}

.editor_wrapper {
  flex: 1;
  position: relative;
}

#editor {
  position: absolute !important;
  margin: auto;
  top: 0;
  bottom: 0;
  width: 100%;
}

<div class="source_table">
  <div style="background-color: aqua;">
    <div>
      <p>Text</p>
      <br/>
      <p>Text</p>
    </div>
  </div>
  <div class="editor_wrapper" style="background-color: blueviolet; border:solid">
    <pre id="editor"></pre>
  </div>
</div>
<script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

请注意，这个问题与 ace 并没有真正的关系，同样适用于定位任何 div。