如何使 Electron 中的 div 可滾動

Question

我正在用 Electron 編寫一個簡單的 Markdown 應用程序。 目前，我只有一個 textarea 和一個 div，以及一些獲取 textarea 中的文本的 Javascript 代碼，將其提供給 Marked（一個方便的 NPM 模塊）並使用 Jquery 設置 div 的內容。

我已經完成了溢出：自動； 在我的 css 文檔中，並嘗試了我遇到的所有明顯的解決方案，但都沒有奏效。 我的 textarea 滾動得很好，但 div 沒有。 它只是切斷底部的文本。

這是我的代碼： https : //codepen.io/anon/pen/jZprNL

html：

<div class="row fullHeight" id="container">
  <div class="column fullHeight " id="markdown">

    <textarea class="padding markdown-body nodrag" id="editor" placeholder="Write something briliant..."></textarea>
  </div>
  <div class="column fullHeight" id="preview">
    <div class="padding markdown-body nodrag" id="output">
    </div>
  </div>
</div>

CSS：

 /* there are some styles here the interact with .row and .column for responcive grid arangement, they are long so I have not added them here */

#container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-bottom: 30px;
}
#editor {
    background-color: #f4f6f7;
    border-width: 0px;
    resize: none;
    width: 100%;
    height: 100%;
    padding: 5px;
    padding-top: 15px;
    margin-right: 5px;
    overflow-y: auto;
    overflow-x: hidden;
}
#output {
    overflow: scroll;
    padding: 5px;
    padding-top: 15px;
}

/* a lot of these styles are irelevant to this question, and are simply here because of what I was doing with electron, but i might aswell add them */

JS：

$editor.on('input propertychange', function () {
  var outputHtml = marked($('#editor').val());
  $output.html(outputHtml);
  console.log($('#editor').val());
});

// note that this doesnt work because Node isnt installed and stuff, but this is a small part of the JS code anyway, incase it is usefull. 

// 編輯添加的代碼筆

Answer 1

鑒於您的示例代碼。 以下應顯示滾動條：

#output {
  overflow: scroll;
  padding: 5px;
  padding-top: 15px;
  width: 90%;
  height: 100px;
}

當一個周圍元素具有固定高度時，您可以使用 100% 的高度。 您提供的代碼僅顯示相對高度。 如果您選擇 100% 的寬度，您可能看不到滾動條。 但是 div 元素仍然是可滾動的。

此外，您使用 Markdown 很可能還包含與 Markdown 相關的樣式表，這會干擾您的樣式表。

Answer 2

你需要有一個包裝 div。

例

<div class="window">
   <div class="scrollable">
     <p>some long text heigher than 500px......</p>
   </div>
</div>

.window {
   height: 500px;
   width: 500px;
   overflow: hidden;
}

.scrollable {
  overflow: scroll;
  height: 100%;
}

代碼筆鏈接https://codepen.io/anon/pen/yvqLOK