tag:forum.selfhtml.org,2005:/self contenteditable Container Layer Background Farbe soll bestehen bleiben – SELFHTML-Forum 2021-01-13T09:24:34Z https://forum.selfhtml.org/self/2021/jan/13/contenteditable-container-layer-background-farbe-soll-bestehen-bleiben/1780417#m1780417 Henry 2021-01-13T04:31:26Z 2021-01-13T04:31:26Z contenteditable 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#m1780419 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2021-01-13T07:28:29Z 2021-01-13T07:28:29Z contenteditable 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#m1780420 Henry 2021-01-13T07:35:59Z 2021-01-13T07:35:59Z contenteditable 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#m1780421 Henry 2021-01-13T08:34:56Z 2021-01-13T08:34:56Z contenteditable 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#m1780422 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2021-01-13T08:43:30Z 2021-01-13T08:43:30Z contenteditable 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#m1780423 Henry 2021-01-13T08:49:59Z 2021-01-13T08:49:59Z contenteditable 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#m1780424 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2021-01-13T08:53:39Z 2021-01-13T08:53:39Z contenteditable 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#m1780425 Henry 2021-01-13T08:58:33Z 2021-01-13T09:01:34Z contenteditable 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#m1780426 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2021-01-13T09:24:34Z 2021-01-13T09:24:34Z contenteditable 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>