Cum pot întinde elementele în blocuri la întreaga lățime a ferestrei browserului utilizând CSS? Această problemă se găsește adesea în marcarea CSS. Adesea, este necesar ca elementul să fie întins dincolo de blocul central al paginii și să ocupe întreaga lățime a ferestrei browserului. În imaginea din stânga vedeți un design comun al paginii.
Elementul exterior al paginii este centrat, de exemplu, cu următorul cod CSS:
Deci, cum se aplică un fundal orizontal repetat care umple întreaga fereastră a browserului? Acest lucru este usor de facut pentru elementele care sunt pe partea de sus a paginii, după cum puteți seta imaginea de fundal a corpului tag-ul, de exemplu:
Dar această metodă nu este potrivită pentru foaia de bloc, deoarece este în blocul de articole și locația sa este determinată de dimensiunea conținutului său. Soluția cea mai evidentă este utilizarea elementelor adiționale, adică mutăm blocul de subsol din blocul de articole și adăugăm blocul interior:
După aceasta, trebuie să adăugați stilurile corespunzătoare codului CSS:
Aceasta este soluția cea mai frecvent utilizată, deși nu este elegantă. Blocul intern este necesar numai pentru a specifica stilurile CSS, nu pentru structura.
Din fericire, există o soluție care funcționează în toate browserele moderne și nu necesită blocuri suplimentare. Trebuie să adăugați o proprietate liniuță interioară cu o valoare mai mare, apoi mutați elementul înapoi în poziția inițială cu o indentare exterioară negativă. Această metodă este adesea folosită pentru a crea coloane de înălțime egală și în acest caz se aplică la lățimea:
Atunci când clasa .extendleft este aplicată unui element, elementul este întins la marginea din stânga a ferestrei browserului. În mod similar, clasa .extendright întinde elementul la marginea din dreapta a ferestrei browserului, iar clasa .extendfull se întinde în ambele direcții. Pentru a evita derularea orizontală, trebuie să setați eticheta corporală la proprietatea overflow-x: hidden care ascunde conținutul care se află în afara ferestrei browserului.
Această soluție funcționează în browserele Internet Explorer de la versiunea 8, Firefox, Chrome, Safari și Opera. Nu poate înlocui complet metoda cu elemente suplimentare, dar în unele cazuri această soluție alternativă poate fi utilă. Dar nu uitați că această decizie reduce viteza site-ului.
Traduceri - Duty Officer
Trimiteți-le prietenilor: