javascript - 如何使Electron中的div可滚动

Question

我正在用 Electron 编写一个简单的 Markdown 应用程序。目前，我只有一个 textarea、一个 div 和一些 Javascript 代码，这些代码获取 textarea 中的文本，将其输入 Marked(一个方便的 NPM 模块)并使用 Jquery 设置 div 的内容。

我已经完成了溢出:自动；在我的 css 文档中，并尝试了我遇到的所有明显的解决方案，但它们都不起作用。我的文本区域滚动得很好，但 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. 

//编辑添加的codepen

Answer 1

给出您的示例代码。下面应该显示一个滚动条:

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

当周围元素具有固定高度时，您可以使用 100% 的高度。您提供的代码仅显示相对高度。如果您选择 100% 的宽度，则可能看不到滚动条。但 div 元素仍然是可滚动的。

此外，您使用 Markdown 时，您可能还包含与 Markdown 相关的样式表，这会干扰您的样式表。