How to make trailing
tag in
behave like trailing line break in ?

Question

In following snippet, I would like trailing inside of

to behave like trailing line break in

</code> so both <code><div></code> and <code><textarea></code> have same <code>scrollHeight</code>.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const div = document.getElementById("div")
const textarea = document.getElementById("textarea")
console.log(div.scrollHeight, textarea.scrollHeight)</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>div, textarea {
  background-color: grey;
  border: 0;
  font-family: monospace;
  height: 24px;
  margin: 0;
  overflow: scroll;
  padding: 0;
  width: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div id="div">
foo<br>
bar<br>
</div>
<br>
<textarea id="textarea">foo
bar

How to make trailing <br> tag in <div> behave like trailing line break in <textarea>?

0 Answers