Reines CSS zum Ändern der Layoutgröße durch Ziehen nach links und rechts

Nutzen Sie die Funktion „Non- overflow:auto - resize Streckung“ des Browsers, um eine JavaScript-freie Spaltenbreitensteuerung zu erreichen.

Die Bildlaufleiste im WebKit-Browser kann angepasst werden. Die Größe des Größenänderungsbereichs entspricht der Größe der Bildlaufleiste. Daher können wir den gesamten Streckungsbereich auf die gleiche Höhe wie den Container bringen.

Umsetzungsprinzip

In CSS gibt es ein resize Attribut. Wenn der overflow -Attributwert eines Elements nicht visible ist, kann die Größe des Elements durch Festlegen des resize -Attributs gestreckt werden.

Bei dieser Streckung gibt es jedoch ein Problem, nämlich dass der Ziehbereich zu klein ist, nur ein kleines bisschen in der unteren rechten Ecke:

Gibt es eine Möglichkeit, diesen Widerstandsbereich zu vergrößern?

Später, nach meinen Recherchen, stellte ich fest, dass die Drag Bar des Größenänderungsattributs und die Drag Bar der Bildlaufleiste Dinge im selben System sind. Sie müssen nur die Bildlaufleiste anpassen, um die Größe der Größenänderungsleiste indirekt festzulegen.

Zum Beispiel:

.resize-bar::-webkit-scrollbar {
 Breite: 200px; Höhe: 200px;
}

An dieser Stelle ist der Dehnungsbereich sehr groß:

Als Nächstes müssen Sie diesen Ziehbereich hinter einem Spaltenlayout verbergen und dann einen Teil der Breite zum Ziehen freigeben, wie unten gezeigt:

Schließlich können wir den gewünschten Effekt erzielen, indem wir ein adaptives Layout für die linke und rechte Spalte verwenden.

Sie können hier klicken: Demo mit reinem CSS zur Erweiterung der Spaltenbreite

Der Code lautet wie folgt:

.Spalte {
    Überlauf: versteckt;
}
.Spalte-links {
    Höhe: 400px;
    Hintergrundfarbe: #fff;
    Position: relativ;
    schweben: links;
}
.Spalte-rechts {
    Höhe: 400px;
    Polsterung: 16px;
    Hintergrundfarbe: #eee;
    Box-Größe: Rahmenbox;
    Überlauf: versteckt;
}
.Größe ändern-speichern {
    Position: absolut;
    oben: 0; rechts: 5px; unten: 0; links: 0;
    Polsterung: 16px;
    Überlauf-x: versteckt;
}
.Größenleiste ändern {
    Breite: 200px; Höhe: erben;
    Größe ändern: horizontal;
    Cursor:ew-Größe ändern; 
    Deckkraft: 0;
    Überlauf: scrollen;
}
/* Linie ziehen */
.Größenänderungszeile {
    Position: absolut;
    rechts: 0; oben: 0; unten: 0;
    Rahmen rechts: 2px durchgezogen #eee;
    Rahmen links: 1px durchgezogen #bbb;
    Zeigerereignisse: keine;
}
.resize-bar:hover ~ .resize-line,
.resize-bar:aktiv ~ .resize-line {
    Rahmen links: 1px gestricheltes Himmelblau;
}
.resize-bar::-webkit-scrollbar {
    Breite: 200px; Höhe: erben;
}

/*Nur der kleine Bereich unten kann in Firefox gestreckt werden*/
@supports (-moz-user-select: keine) {
    .resize-bar:hover ~ .resize-line,
    .resize-bar:aktiv ~ .resize-line {
        Rahmen links: 1px durchgezogen #bbb;
    }
    .resize-bar:hover ~ .resize-line::nach,
    .resize-bar:aktiv ~ .resize-line::nach {
        Inhalt: '';
        Position: absolut;
        Breite: 16px; Höhe: 16px;
        unten: 0; rechts: -8px;
        Hintergrund: URL (./resize.svg);
        Hintergrundgröße: 100 % 100 %;
    }
}

<div Klasse="Spalte">
    <div Klasse="Spalte-links">
        <div Klasse="Größenänderungsleiste"></div>
        <div Klasse="Größenänderungszeile"></div>
        <div Klasse="Größe ändern-speichern">
            Inhalt links, Inhalt links, Inhalt links, Inhalt links</div>                                            
    </div>
    <div Klasse="Spalte-rechts">
        Inhalt rechts, Inhalt rechts, Inhalt rechts, Inhalt rechts</div>
</div>

Nutzen Sie die Funktion „Non- overflow:auto - resize Streckung“ des Browsers, um eine JavaScript-freie Spaltenbreitensteuerung zu erreichen.

Die Bildlaufleiste im WebKit-Browser kann angepasst werden. Die Größe des Größenänderungsbereichs entspricht der Größe der Bildlaufleiste. Daher können wir den gesamten Streckungsbereich auf die gleiche Höhe wie den Container bringen.

Dies ist das Ende dieses Artikels zum Ändern der Layoutgröße durch Ziehen nach links und rechts mit reinem CSS. Weitere Informationen zum Ändern der Layoutgröße durch Ziehen nach links und rechts mit CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!