HTML-adaptives Layout links, zentriert und rechts (mithilfe des Calc-CSS-Ausdrucks)

Im neuesten HTML-Standard gibt es einen Calc-CSS-Ausdruck, mit dem wir das Layout berechnen können.
Es wird jedoch im alten IE nicht unterstützt. Um alle Browser zu unterstützen, wird hier js verwendet.
Screenshot:

Code:

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN">
<html>
<Kopf>
<Titel>MeinHtml.html</Titel>
<meta http-equiv="Schlüsselwörter" content="Schlüsselwort1,Schlüsselwort2,Schlüsselwort3">
<meta http-equiv="description" content="das ist meine Seite">
<meta http-equiv="Inhaltstyp" Inhalt="text/html; Zeichensatz=UTF-8">
<Skript>
var links, Mitte, rechts, Breite;
fenster.onload = funktion(){
links=$('links');
Mitte=$('Mitte');
rechts=$('rechts');
bei Größenänderung();
};
Fenster.onresize = Funktion() {
versuchen {
Breite = Dokument.Body.Clientbreite;
center.style.width = (Breite – linke Clientbreite – rechte Clientbreite – 0) + "px";
}fangen(e){
//Wenn es kleiner als 0 ist, wird ein Fehler gemeldet
}
};
Funktion $(id){
gibt document.getElementById(id) zurück;
}
</Skript>
<Stil>
Textkörper,html{
Höhe: 100 %;
Rand: 0px;
Polsterung: 0px;
Überlauf: versteckt;
}
#links,#Mitte,#rechts
Breite: 200px;
Höhe: 100px;
Hintergrundfarbe: RGB (34,124,134);
schweben: links;
Höhe: 100 %;
}
#Center{
Hintergrundfarbe: rot;
}
</Stil>
</Kopf>
<Text>
<div id="links"></div>
<div id="center"></div>
<div id="rechts"></div>
</body>
</html>

<<: Vue erzielt den Top-Effekt durch V-Show

>>: MySQL praktische Fensterfunktion SQL-Analyse Klasse Testergebnisse und Lebenshaltungskosten Studenten

Einführung in die Installations- und Bereitstellungsschritte für SSL-Zertifikate unter Nginx

HTML-adaptives Layout links, zentriert und rechts (mithilfe des Calc-CSS-Ausdrucks)

Einführung in die Installations- und Bereitstellungsschritte für SSL-Zertifikate unter Nginx

So fügen Sie in 88 Sekunden 10 Millionen Datensätze in eine MySQL-Datenbanktabelle ein

HTML-Framework_Powernode Java Academy

Implementierung von React Routing Guard (Routing-Interception)

Die einfachste Lösung für das Problem, dass Sublime Text in Ubuntu kein Chinesisch eingeben kann

HTML-Code einer Webseite: Erzeugung von Lauftext

So ändern Sie den Inhalt eines vorhandenen Docker-Containers

Detaillierte Erklärung des Marquee-Attributs in HTML

Ubuntu 18.04 installiert pyenv, pyenv-virtualenv, virtualenv, Numpy, SciPy, Pillow, Matplotlib

MySQL-Indexoptimierung: Detaillierte Einführung in die Paging-Erkundung

Artikel empfehlen

So verwenden Sie html2canvas, um HTML-Code in Bilder umzuwandeln

Anweisungen zur Verwendung des Meta-Viewport-Tags (Zoom-Steuerung beim mobilen Surfen)

Eine einfache Implementierungsmethode für eine digitale LED-Uhr in CSS3

8 Beispiele für die Verwendung des Killall-Befehls zum Beenden von Prozessen in Linux

Eine kurze Diskussion über reguläre JS-RegExp-Objekte

Tipps zum reflektierenden Lernen von JavaScript

Drücken Sie die Eingabetaste, um das Formular automatisch abzuschicken. Unerwartete Entdeckung

Vollständige Schritte für dynamische Bindungssymbole in Vue

Detaillierte Erklärung der grundlegenden Verwendung von MySQL-Triggern [Erstellen, Anzeigen, Löschen usw.]

Detaillierte JavaScript-Rekursion

Warum der Befehl „explain“ MySQL-Daten ändern kann

MariaDB unter Linux startet mit dem Root-Benutzer (empfohlen)

Vue.js verwaltet die Kapselung von Hintergrundtabellenkomponenten

So verwenden Sie Filter zur Implementierung der Überwachung in Zabbix

5 Möglichkeiten, den diagonalen Kopfzeileneffekt in der Tabelle zu erzielen