Henry: contenteditable Container Layer Background Farbe soll bestehen bleiben

problematische Seite

Hallo,

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.

Sobald man aber mehr hinein schreibt, die Seite die ursprüngliche Höhe ändert, funktioniert das nicht mehr. Beispiel.

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?

Gruss
Henry

--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“

akzeptierte Antworten

  1. problematische Seite

    Hallo Henry,

    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?

    min-height?

    Bis demnächst
    Matthias

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
    1. problematische Seite

      Hallo Matthias,

      min-height?

      Oje, manchmal kanns so einfach sein, vielen Dank.

      Gruss
      Henry

      --
      Meine Meinung zu DSGVO & Co:
      „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
    2. problematische Seite

      Hallo Matthias,

      min-height?

      Beim letzten Beispiel funktionierte das. Hier aber nicht, wahrscheinlich Wald vor Bäumen aber kann nicht erkennen woran es liegt.

      Gruss
      Henry

      --
      Meine Meinung zu DSGVO & Co:
      „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
      1. problematische Seite

        Hallo Henry,

        body{min-height:100vh;margin:0;padding:3%;position:relative}
        #vorhang
        {
        z-index:180;
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        background-color:navy;
        opacity:0.8;
        
        }
        

        Bis demnächst
        Matthias

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
        1. problematische Seite

          Hallo Matthias,

          nochmals danke. Ja tatsächlich lags nur an "position:relative" für den BODY. Aber warum? Und, ist er doch per default sowieso oder?

          Gruss
          Henry

          --
          Meine Meinung zu DSGVO & Co:
          „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
          1. problematische Seite

            Hallo Henry,

            default ist static. Und es lag nicht nur daran. Ich habe top, left, bottom und right gesetzt.

            Bis demnächst
            Matthias

            --
            Du kannst das Projekt SELFHTML unterstützen,
            indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
            1. problematische Seite

              Hallo Matthias,

              default ist static.

              Ja, dachte aber vergleichbar und macht kaum einen Unterschied. Erklärt aber nicht, was es hier genau bewirkt.

              Und es lag nicht nur daran. Ich habe top, left, bottom und right gesetzt.

              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?

              Gruss
              Henry

              --
              Meine Meinung zu DSGVO & Co:
              „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
              1. problematische Seite

                Hallo Henry,

                Ja, dachte aber vergleichbar und macht kaum einen Unterschied. Erklärt aber nicht, was es hier genau bewirkt.

                Nein, nicht vergleichbar. ein absolut positionierstes Element richtet sich nach dem nächsten Vorfahrenelement, das nicht static ist.

                Und es lag nicht nur daran. Ich habe top, left, bottom und right gesetzt.

                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?

                Ich habe die Angaben zur Höhe und Breite weggelassen.

                Bis demnächst
                Matthias

                --
                Du kannst das Projekt SELFHTML unterstützen,
                indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.