Question

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

我已经完成了溢出：auto;在我的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.

//编辑添加的codepen

Answer 1

给出您的示例代码。以下应显示滚动条：

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

当一个周围元素具有固定高度时，您可以使用100％的高度。您提供的代码仅显示相对高度。如果您选择宽度为100％，则可能会发生您没有看到滚动条的情况。但仍然可以滚动div元素。

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

Answer 2

你需要一个包装div。

i.ex

<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%;
}

codepen链接 https://codepen.io/anon/pen/yvqLOK

如何在电子滚动中制作div

2 个答案: