讓無框 React/Electron 應用程序標題欄在滾動期間不消失

Question

我有一個帶有文本編輯器和標題欄的基本應用程序。 除非文本編輯器溢出，否則我不希望滾動條出現在側面。 即使那樣，我也不希望標題欄在滾動過程中消失。 現在，確實如此。

我認為這里缺少一些 CSS 巫術，或者我做錯了什么。

使用 React、JS 和 Electron。 如果重要的話，文本編輯器是Quill.js 。 使用create-react-app 。

應用程序css：

.App {
    min-height: 100%;
    margin: 0;
    background-color: red;
}

.editor {
    background-color: rgb(29, 29, 29);
    color: rgb(201, 201, 201);
    min-width: 100%;
    height: 100%;
    position: absolute;
    margin-top: 30px;
}

.app-bar {
    -webkit-app-region: drag;
    min-width: 100%;
    background-color: green;
    position: fixed;
    height: 30px;
}

應用程序.js：

import React, { Component } from 'react'
import ReactQuill from 'react-quill';

import './App.css';
import 'react-quill/dist/quill.bubble.css';

export class App extends Component {

  constructor() {
    super();
  }

  render() {
    return (
      <div className="App">
        <div className="app-bar">
          test
        </div>
        <div>
          <ReactQuill theme="bubble" className="editor" />
        </div>
      </div>
    );
  }
}

export default App;

我的意思的截圖：

當我向下滾動時，文本會保留在那里，但顏色會滾動：

Answer 1

試試加這個，

body{
margin-bottom:30px;
}