tag:forum.selfhtml.org,2005:/selfcontenteditable Container Layer Background Farbe soll bestehen bleiben – SELFHTML-Forum2021-01-13T09:24:34Zhttps://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780417#m1780417Henry2021-01-13T04:31:26Z2021-01-13T04:31:26Zcontenteditable Container Layer Background Farbe soll bestehen bleiben<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>
https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780419#m1780419Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2021-01-13T07:28:29Z2021-01-13T07:28:29Zcontenteditable Container Layer Background Farbe soll bestehen bleiben<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>
https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780420#m1780420Henry2021-01-13T07:35:59Z2021-01-13T07:35:59Zcontenteditable Container Layer Background Farbe soll bestehen bleiben<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>
https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780421#m1780421Henry2021-01-13T08:34:56Z2021-01-13T08:34:56Zcontenteditable Container Layer Background Farbe soll bestehen bleiben<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>
https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780422#m1780422Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2021-01-13T08:43:30Z2021-01-13T08:43:30Zcontenteditable Container Layer Background Farbe soll bestehen bleiben<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>
https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780423#m1780423Henry2021-01-13T08:49:59Z2021-01-13T08:49:59Zcontenteditable Container Layer Background Farbe soll bestehen bleiben<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>
https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780424#m1780424Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2021-01-13T08:53:39Z2021-01-13T08:53:39Zcontenteditable Container Layer Background Farbe soll bestehen bleiben<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>
https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780425#m1780425Henry2021-01-13T08:58:33Z2021-01-13T09:01:34Zcontenteditable Container Layer Background Farbe soll bestehen bleiben<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>
https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780426#m1780426Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2021-01-13T09:24:34Z2021-01-13T09:24:34Zcontenteditable Container Layer Background Farbe soll bestehen bleiben<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>