允许在第二行 Table 中滚动，同时将第一行用作 Table Header (CSS)

Question

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

我尝试做一些与 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的高度填满整个window，设置ace的parent编辑器有 flex:1 和位置：相对

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。

允许在第二行 Table 中滚动，同时将第一行用作 Table Header (CSS)

Allow Scrolling In Second Table Row While Using First Row As Table Header (CSS)

html

javascript

css

ace-editor