Antraštė ir poraštė dabar driekiasi per visą plotį

Mažas pakeitimas, matomas kiekviename šios svetainės puslapyje: tamsi juosta viršuje ir poraštė apačioje dabar driekiasi per visą lango plotį.

Iki šiandien jos buvo tame pačiame 1180 pikselių stulpelyje kaip visa kita, todėl plačiame ekrane puslapis buvo turinio juostelė, plūduriuojanti tuščiame fone. Statistikos puslapių poraštė jau buvo per visą plotį – vienintelė, ir būtent šis nenuoseklumas viską pradėjo.

Kas nepasikeitė

Turinys šių juostų viduje. Tekstas, mygtukai ir skaičiai vis dar lygiuojami pagal tuos pačius 1180 pikselių kaip žemiau esančios skiltys, todėl juosta plati, o tekstas – ne. Niekas neskaito šimto ženklų eilučių, o per 27 colių monitorių ištempta antraštė yra aplaidumas, o ne dizainas.

Kodėl ne įprastas triukas

Įprastas būdas ištraukti elementą iš centruoto stulpelio – neigiama paraštė pagal 100vw. Jis turi trūkumą, kurį lengva praleisti kompiuteryje su išjungta slinkties juosta: vw apima ir slinkties juostą. Blokas tampa platesnis už matomą sritį tiksliai jos pločiu, o visą puslapį galima pastumti keliais pikseliais į šoną – telefone tai reiškia, kad skaitant išdėstymas juda po nykščiu.

Todėl juosta ne plečiasi į išorę, o iš pradžių yra plati ir turi vidines paraštes:

padding-inline: max(20px, calc((100% - 1180px) / 2))

Procentai skaičiuojami pagal pirminį elementą, kuris čia yra puslapio turinio elementas ir neapima slinkties juostos. Kai plotis mažesnis nei 1180 pikselių, laimi pirmoji reikšmė, ir juosta išlaiko tinkamą 20 pikselių paraštę vietoj neigiamos. Nereikia antro gaubiančio elemento, JavaScript ar ko nors matuoti vykdymo metu.

Kur tai taikoma

Pradiniame puslapyje, puslapyje apie paslaugą ir kiekviename statistikos puslapyje. Visuose trijuose ta pati sandara – to ir siekta.