Lösung für das Problem, dass die Seite nicht springt, wenn die Calc-Bildlaufleiste angezeigt wird-CSS-Tutorial-php.cn

Lösung für das Problem, dass die Seite nicht springt, wenn die Calc-Bildlaufleiste angezeigt wird

php中世界最好的语言

Freigeben： 2018-03-21 11:55:38

Original

1532 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen eine Lösung für das Problem, dass die Seite nicht springt, wenn die Calc-Bildlaufleiste angezeigt wird. Welche Vorsichtsmaßnahmen gibt es, um das Problem zu lösen, wenn die Calc-Bildlaufleiste angezeigt wird und die Seite angezeigt wird? Springt nicht. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Was ist calc()?

calc() wörtlich 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 ermitteln? 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“ ein Ausdruck ist, der zur Berechnung der Länge verwendet wird

Beschreibung

wird verwendet, um den Längenwert dynamisch zu berechnen.

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 zu springen, wenn die Bildlaufleiste angezeigt wird

<!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 die Der Seiteninhalt wird dynamisch geladen, es gibt zunächst keine Bildlaufleiste und die Bildlaufleiste erscheint, nachdem der Inhalt zunimmt. Zu diesem Zeitpunkt wird bei Verwendung eines mittig ausgerichteten Layouts mit fester Breite eine Bildlaufleistenbreite nach links verschoben. 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, es ist nur eine Codezeile erforderlich:

oder:

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

Nach dem Login kopieren

Zuallererst bezieht sich .wrap-outer auf die zentrierter Körper mit fester Breite Der übergeordnete Browser unterstützt dies grundsätzlich (kann nicht für

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

Nach dem Login kopieren

Hintergrundposition

verwendet werden).

Schließlich ist 100vw die interne Breite des Browsers relativ zum Browserfenster. innerWidth. Beachten Sie, dass auch die Breite der Bildlaufleiste gezählt 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!

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website ! Empfohlene Lektüre:

Detaillierte Erklärung der Verwendung von Zeigerereignissen in CSS3

Detaillierte Erklärung der Verwendung von Fokus-innerhalb

Das obige ist der detaillierte Inhalt vonLösung für das Problem, dass die Seite nicht springt, wenn die Calc-Bildlaufleiste angezeigt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!