contenteditable Container Layer Background Farbe soll bestehen bleiben – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self contenteditable Container Layer Background Farbe soll bestehen bleiben Wed, 13 Jan 21 04:31:26 Z https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780417#m1780417 https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780417#m1780417 <p>Hallo,</p> <p>Wenn ich ein Element mit contenteditable beschreibbar mache um das als Layer zu verwenden, soll der Hintergrund sich beim Schreiben => dadurch Höhenänderung anpassen, also height 100% bzw vh.</p> <p>Sobald man aber mehr hinein schreibt, die Seite die ursprüngliche Höhe ändert, funktioniert das nicht mehr. <a href="https://www.w3schools.com/code/tryit.asp?filename=GMLWSGHXCPHO" rel="nofollow noopener noreferrer">Beispiel</a>.</p> <p>Im Moment fällt mir nur die Lösung ein die Höhe zu überwachen und dann dynamisch das CSS anzupassen. Aber gibts da keine reine HTML/CSS Lösung für?</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> contenteditable Container Layer Background Farbe soll bestehen bleiben Wed, 13 Jan 21 07:28:29 Z https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780419#m1780419 https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780419#m1780419 <p>Hallo Henry,</p> <blockquote> <p>Im Moment fällt mir nur die Lösung ein die Höhe zu überwachen und dann dynamisch das CSS anzupassen. Aber gibts da keine reine HTML/CSS Lösung für?</p> </blockquote> <p>min-height?</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> contenteditable Container Layer Background Farbe soll bestehen bleiben Wed, 13 Jan 21 07:35:59 Z https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780420#m1780420 https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780420#m1780420 <p>Hallo Matthias,</p> <blockquote> <p>min-height?</p> </blockquote> <p>Oje, manchmal kanns so einfach sein, vielen Dank.</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> contenteditable Container Layer Background Farbe soll bestehen bleiben Wed, 13 Jan 21 08:34:56 Z https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780421#m1780421 https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780421#m1780421 <p>Hallo Matthias,</p> <blockquote> <p>min-height?</p> </blockquote> <p>Beim letzten Beispiel funktionierte das. <a href="https://www.w3schools.com/code/tryit.asp?filename=GMM6I5GSN3F1" rel="nofollow noopener noreferrer">Hier aber nicht</a>, wahrscheinlich Wald vor Bäumen aber kann nicht erkennen woran es liegt.</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> contenteditable Container Layer Background Farbe soll bestehen bleiben Wed, 13 Jan 21 08:43:30 Z https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780422#m1780422 https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780422#m1780422 <p>Hallo Henry,</p> <pre><code class="block language-css"><span class="token selector">body</span><span class="token punctuation">{</span><span class="token property">min-height</span><span class="token punctuation">:</span>100vh<span class="token punctuation">;</span><span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">padding</span><span class="token punctuation">:</span>3%<span class="token punctuation">;</span><span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">}</span> <span class="token selector">#vorhang</span> <span class="token punctuation">{</span> <span class="token property">z-index</span><span class="token punctuation">:</span>180<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span>navy<span class="token punctuation">;</span> <span class="token property">opacity</span><span class="token punctuation">:</span>0.8<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> contenteditable Container Layer Background Farbe soll bestehen bleiben Wed, 13 Jan 21 08:49:59 Z https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780423#m1780423 https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780423#m1780423 <p>Hallo Matthias,</p> <p>nochmals danke. Ja tatsächlich lags nur an "position:relative" für den BODY. Aber warum? Und, ist er doch per default sowieso oder?</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> contenteditable Container Layer Background Farbe soll bestehen bleiben Wed, 13 Jan 21 08:53:39 Z https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780424#m1780424 https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780424#m1780424 <p>Hallo Henry,</p> <p>default ist static. Und es lag nicht nur daran. Ich habe top, left, bottom und right gesetzt.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> contenteditable Container Layer Background Farbe soll bestehen bleiben Wed, 13 Jan 21 08:58:33 Z https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780425#m1780425 https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780425#m1780425 <p>Hallo Matthias,</p> <blockquote> <p>default ist static.</p> </blockquote> <p>Ja, dachte aber vergleichbar und macht kaum einen Unterschied. Erklärt aber nicht, was es hier genau bewirkt.</p> <blockquote> <p>Und es lag nicht nur daran. Ich habe top, left, bottom und right gesetzt.</p> </blockquote> <p>top und left war schon, habe aber nur position relative genutzt, mehr brauchts dafür nicht. Welchen Vorteil hätten die zusätzlichen bottom/right Angaben hierbei?</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> contenteditable Container Layer Background Farbe soll bestehen bleiben Wed, 13 Jan 21 09:24:34 Z https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780426#m1780426 https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780426#m1780426 <p>Hallo Henry,</p> <blockquote> <p>Ja, dachte aber vergleichbar und macht kaum einen Unterschied. Erklärt aber nicht, was es hier genau bewirkt.</p> </blockquote> <p>Nein, nicht vergleichbar. ein absolut positionierstes Element richtet sich nach dem nächsten Vorfahrenelement, das nicht static ist.</p> <blockquote> <blockquote> <p>Und es lag nicht nur daran. Ich habe top, left, bottom und right gesetzt.</p> </blockquote> <p>top und left war schon, habe aber nur position relative genutzt, mehr brauchts dafür nicht. Welchen Vorteil hätten die zusätzlichen bottom/right Angaben hierbei?</p> </blockquote> <p>Ich habe die Angaben zur Höhe und Breite weggelassen.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div>