Scroll corect - sărituri - pe css pur

Când centralizați o pagină Web pe CSS folosind marja: 0 auto. există o problemă foarte neplăcută: site-ul sare când se deplasează între pagini scurte și lungi.

Acest lucru se datorează faptului că pe o pagină scurtă bara verticală de derulare este ascunsă, iar pe cea lungă apare.

Fixarea clasică a acestei probleme este întotdeauna afișarea unei bare de derulare verticale:

Dar odată cu apariția CSS3, abordarea rezolvării acestei probleme sa schimbat grație utilizării calc () și a noii unități de măsură vm:

Numărarea lățimii barei de derulare funcționează numai cu condiția. asta pentru eticheta valoarea depășirii: automat este setat.

Dar există o mică problemă: dacă folosiți un design web adaptiv. atunci vă veți confrunta cu faptul că marja-stânga este mai mult decât marja dreaptă. când pagina este foarte mică.

Puteți să o rezolvați pur și simplu - utilizați această abordare numai pe ecrane largi (mai mult de 960 de pixeli), pentru care puteți utiliza expresiile media în CSS:

Această abordare funcționează în IE9 +, Chrome și Firefox, dar nu funcționează în Opera și Safari 7.

2. Pentru a introduce codul, folosiți etichetele speciale [code lang = "php"] codul [/ code]

Și blocurile cu lățime întreagă?
Am o bandă albă în stânga mea.

Arătați, de exemplu, un exemplu pe un site web real sau pe un codificator

Și puteți explica de ce vă complică viața atunci când soluția css dintr-o singură linie funcționează corect?

O întrebare din categoria: "de ce ați inventat roata, pentru că există picioare"

Trebuie să ținem pasul cu progresul, fără să ne împiedicăm pe cârjele trecutului!

Acesta nu este un răspuns, roata are cel puțin unele avantaje față de picioare, există un proces de dragul rezultatului.

În noua soluție, nu văd avantaje, iată procesul de dragul procesului.

Fiecare sarcină are mai multe soluții. De exemplu, puteți roti colțuri cu imagini, divs, svg, raza de graniță.

Deci aici. Aceasta este doar o singură soluție. A folosi sau nu - devine clar din practică. Există situații în care depășiți: defilați; de a folosi pur și simplu este imposibil.

WordPress Digest
Digest de știri din lumea WordPress







Trimiteți-le prietenilor: