Lösen Sie das Problem, dass die Bildlaufleiste von CSS3 Calc nicht auf der Seite springt-CSS-Tutorial-php.cn

Lösen Sie das Problem, dass die Bildlaufleiste von CSS3 Calc nicht auf der Seite springt

巴扎黑

Freigeben： 2017-09-18 11:31:38

Original

2095 Leute haben es durchsucht

Calc ist eine neue Funktion von CSS3, die zur Angabe der Länge von Elementen verwendet wird. Der größte Vorteil von calc() besteht darin, dass die Breite des Elements über calc() berechnet werden kann. Als nächstes teilt Ihnen der Herausgeber von Script House die CSS3 Calc-Implementierung des Bildlaufleistenproblems mit, bei der die Seite nicht springt. Freunde, die es benötigen, können darauf verweisen

Was ist Calc ()?

calc() Im wahrsten Sinne des Wortes können wir es als Funktion Funktion verstehen. Tatsächlich ist calc die Abkürzung des englischen Wortes calcule. Es handelt sich um eine neue Funktion von CSS3 und wird zur Angabe der Länge von Elementen verwendet. Sie können beispielsweise calc() verwenden, um dynamische Werte für die Eigenschaften „Rahmen“, „Rand“, „Abstand“, „Schriftgröße“ und „Breite“ eines Elements festzulegen. Warum wird es als dynamischer Wert bezeichnet, weil wir Ausdrücke verwenden, um den Wert zu erhalten? Der größte Vorteil von calc() besteht jedoch darin, dass es im Fluid-Layout verwendet werden kann. Die Breite des Elements kann über calc() berechnet werden.

Syntax

calc() = calc(四则运算)

Nach dem Login kopieren

Zum Beispiel:

.elm {
  width: calc(expression);
}

Nach dem Login kopieren

wobei „Ausdruck“ ist Ein Ausdruck zur Berechnung der Länge

Beschreibung

wird zur dynamischen Berechnung des Längenwerts verwendet.

Es ist zu beachten, dass vor und nach dem Operator ein Platz reserviert werden muss, zum Beispiel: width: calc(100% - 10px);
Jeder Längenwert kann mit der Funktion calc() berechnet werden.
Die Funktion calc() unterstützt „+“, „-“, „*“, „/“ Operationen;
Die Funktion calc() verwendet standardmäßige mathematische Vorrangregeln

Kompatibilität

Einfaches Beispiel:

Erklären wir das am häufigsten verwendete: die Anwendung, die die Seite implementiert, ohne beim Scrollen der Bildlaufleiste zu springen erscheint

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>calc()函数_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test {
    width: calc(100% - 50px);
    background: #eee;
}
</style>
</head>
<body>
<p class="test">我的宽度为100% - 50px</p>
</body>
</html>

Nach dem Login kopieren

Wenn der Seiteninhalt dynamisch geladen wird und es zunächst keine Bildlaufleiste gibt, die Bildlaufleiste jedoch erscheint, nachdem der Inhalt zunimmt, wird bei Verwendung eines zentriert ausgerichteten Layouts mit fester Breite die Bildlaufleistenbreite um eine verschoben die linke. Die Lösung kann darin bestehen, overflow-y:scroll zum gesamten Inhalt hinzuzufügen oder ihn entsprechend dem Inhalt mit CSS zu füllen und dann den Inhalt hinzuzufügen. In diesem Artikel wird die Berechnung der Bildlaufleistenbreite vorgestellt. Wenn eine Bildlaufleiste vorhanden ist, wird die Breite der Bildlaufleiste auch außerhalb des Inhalts simuliert, sodass sie nicht versetzt wird. ·

Es ist ganz einfach, nur eine Codezeile:

oder:

.wrap-outer {
    margin-left: calc(100vw - 100%);
}

Nach dem Login kopieren

Zuallererst bezieht sich .wrap-outer auf das übergeordnete Element des zentrierten Körpers mit fester Breite. Wenn nicht, erstellen Sie einen (ähnliche Effekte können mit dem Körper erzielt werden, dies wird jedoch aufgrund des Prinzips nicht empfohlen Breitentrennung);

.wrap-outer {
    padding-left: calc(100vw - 100%);
}

Nach dem Login kopieren

Dann ist calc eine Berechnung in CSS3, die von IE10+-Browsern unterstützt wird und grundsätzlich von IE9-Browsern unterstützt wird (kann nicht für die Hintergrundposition verwendet werden);

Schließlich ist 100vw relativ zur window.innerWidth des Browsers, ist die interne Breite des Browsers. Beachten Sie, dass auch die Breite der Bildlaufleiste in die Berechnung einbezogen wird! Und 100 % ist die verfügbare Breite, also die Breite ohne Bildlaufleisten.

calc(100vw - 100%) ist also die Breite der Browser-Bildlaufleiste (falls vorhanden, ist sie 0, wenn keine Bildlaufleiste vorhanden ist)! Wenn links und rechts eine Scrollbalkenbreite vorhanden ist (oder beide 0 sind), kann der Hauptinhalt immer ohne Sprünge zentriert im Browser angezeigt werden!

Das obige ist der detaillierte Inhalt vonLösen Sie das Problem, dass die Bildlaufleiste von CSS3 Calc nicht auf der Seite springt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!