În acest articol, vom analiza în detaliu proprietatea overflow cu toate valorile sale, care vă permite și să adăugați sau să eliminați o bară de derulare orizontală/verticală. Cu alte cuvinte, cum să faci bare de defilare.

Overflow în CSS este responsabil pentru modul în care informațiile din bloc vor arăta dacă conținutul depășește înălțimea sau lățimea acestui bloc. Această proprietate se aplică numai elementelor bloc (display : block ; sau celor care sunt inițial elemente bloc - div și așa mai departe).

Valori posibile pe care le poate lua această proprietate (valorile implicite sunt vizibile):

• Vizibil - Se afișează întregul conținut al elementului, chiar și în afara înălțimii și lățimii setate.
• Ascuns - Numai zona din interiorul elementului este afișată, restul va fi ascuns.
• Defilare - Barele de defilare sunt întotdeauna adăugate.
• Auto - Scrollbars sunt adăugate numai atunci când este necesar.
• Moștenire - Moștenește valoarea părintelui.

Cel mai adesea, această proprietate este folosită pentru a elimina sau adăuga bare de defilare la un element. Așa sunt, de exemplu, manevrate ramele pentru a nu le înghesui la dimensiunea maximă. Sau pentru a introduce un text mare, astfel încât să nu ocupe o jumătate de pagină, ci să se așeze confortabil într-un bloc special și acolo să poată fi derulat și citit. În cea mai mare parte, proprietatea rezolvă problemele de afișare confortabilă a informațiilor.

În demonstrație, puteți vedea cum funcționează în practică fiecare dintre valorile proprietății:

cod HTML

body (marja: 0 0 0 0; padding: 0 0 60px 0; font-size: 16px;) h2 (culoare:#CC0033;) div ( lățime: 200px; /* lățime fixă ​​*/ înălțime: 300px; /* fix înălțime */ chenar:1px solid #555; padding:4px; margin:4px; float:left; ) .VisibleDiv (overflow:visible;) .HiddenDiv (overflow:hidden;) .ScrollDiv (overflow:scroll;) .AutoDiv ( overflow:auto;)

Merită să acordați atenție faptului că, în acest caz particular, blocurile cu o înălțime și lățime fixă ​​dată. Acest lucru este important, de exemplu, luați în considerare opțiunea când înălțimea blocului este setată la automat:

Vedem că textul în toate cazurile este corect afișat în interiorul blocului, cu excepția unui mic inconvenient în cazul scroll-ului, unde apar bare de defilare inactive.

Dar în acest caz există un mic pericol, întâlnit cu care mulți nu înțeleg de ce a apărut și cum să-l remedieze. Ideea este că dacă un bloc cu overflow : vizibil ; adică valoarea implicită, iar conținutul său are elemente cu orice valoare float, cu excepția none , atunci toate acestea nu vor fi afișate corect. Pentru a înțelege care este această situație, luați în considerare un exemplu:

Sub blocul VisibleDiv se află un alt bloc

Nu există nimic sub blocul VisibleDiv

body (marja: 0 0 0 0; umplutură: 0 0 60px 0; dimensiunea fontului: 16px;) h2 (culoare:#CC0033;) p (float:stânga;) div ( lățime: 500px; înălțime: automat; chenar: 1px solid #555; padding:4px; margin:4px; ) .VisibleDiv (overflow:visible;background: rgba(0,255,0,0.1);) .ignor (fundal: rgba(0,255,0,0.6); culoare:# FFFFFF;greutatea fontului:bold;)

În primul caz, este clar că conținutul cu proprietatea float iese în afara blocului și nu este luat în considerare de acesta la determinarea înălțimii blocului, în al doilea caz, sub blocul cu preaplin : vizibil ; un alt bloc este special plasat și vopsit într-o culoare diferită. Acestea nu sunt singurele exemple despre modul în care astfel de blocuri (cu overflow : vizibil ; și înălțime : auto ; ) se pot comporta pe pagină. Acest lucru se rezolvă prin înlocuirea valorii vizibile cu hidden , rețineți că această proprietate ar trebui specificată doar pentru blocurile cu înălțime : auto ; , dacă există o înălțime fixă, atunci există șanse mari ca conținutul să se ascundă pur și simplu dacă este mai mare decât înălțimea dată.

Iată cum ar arăta versiunea corectată:

De asemenea, nu vei avea o astfel de problemă dacă blocul cu overflow : vizibil ; si inaltime : auto ; este setată și o anumită valoare a proprietății float. În general, în multe cazuri, afișarea elementelor depinde de un set de proprietăți, și nu de proprietăți individuale.

Proprietatea overflow controlează afișarea conținutului unui element bloc dacă nu se potrivește în întregime și depășește zona dimensiunilor specificate.

scurte informatii

Notaţie

	Descriere	Exemplu
<тип>	Specifică tipul valorii.	<размер>
A&&B	Valorile trebuie să fie afișate în ordinea specificată.	<размер> && <цвет>
A | B	Indică faptul că ar trebui selectată doar una dintre valorile sugerate (A sau B).	normal | litere mici
A || B	Fiecare valoare poate fi folosită singură sau în combinație cu altele în orice ordine.	lățime || numara
	Grupează valori.	[ recolta || traversa]
*	Repetați de zero sau de mai multe ori.	[,<время>]*
+	Repetați una sau mai multe ori.	<число>+
?	Tipul, cuvântul sau grupul specificat este opțional.	medalion?
(A, B)	Repetați cel puțin A, dar nu mai mult de B ori.	<радиус>{1,4}
#	Repetați o dată sau de mai multe ori, separate prin virgule.	<время>#

×

Valori

vizibil Afișează întregul conținut al elementului, chiar și în afara înălțimii și lățimii setate. ascuns Numai zona din interiorul elementului este afișată, restul va fi ascuns. scroll Barele de defilare sunt întotdeauna adăugate. Barele de defilare automate sunt adăugate numai atunci când este necesar.

Cutie cu nisip

Winnie the Pooh nu s-a împotrivit întotdeauna un pic de răcoare, mai ales la ora unsprezece dimineața, pentru că la acea oră micul dejun se terminase de mult, iar cina nici nu se gândise să înceapă. Și, desigur, s-a bucurat teribil să vadă că Iepurele a scos cești și farfurii.

div (înălțime: 80px; overflow: automat; )

Exemplu

Rezultatul acestui exemplu este prezentat în Fig. unu.

Orez. 1. Aplicarea proprietății overflow

Model de obiect

Un obiect.stil.debordare

Notă

Internet Explorer până la versiunea 7.0 inclusiv:

• Elementele copil poziționate relativ, cu overflow setat la automat sau scroll, se comportă ca și cum ar fi setate la poziție: fixă.

Internet Explorer 8:

• Combinarea depășirii cu valoarea de defilare cu proprietățile max-height și float poate face ca elementele paginii web să dispară, lăsând un ecran gol în browser.
• Pentru un bloc care are proprietățile float și overflow setate la scroll , lățimea setată prin proprietatea max-width este ignorată.
• Înălțimea unei casete cu o bară de derulare orizontală este mărită cu înălțimea barei de derulare, deși specificația CSS specifică că dimensiunile trebuie să includă și barele de defilare.

Firefox 3.6 aplică incorect overflow grupurilor de celule de tabel ( , , ).

Specificație

Fiecare specificație trece prin mai multe etape de aprobare.

• Recomandare (Recomandare) - specificația este aprobată de W3C și recomandată ca standard.
• Recomandarea candidatului ( Recomandare posibilă) - grupul responsabil de standard este mulțumit că își îndeplinește obiectivele, dar este necesar sprijinul comunității de dezvoltare pentru implementarea standardului.
• Recomandare propusă ( Recomandare sugerată) - în această etapă, documentul este înaintat Consiliului consultativ W3C pentru aprobare finală.
• Proiect de lucru - Un proiect mai matur după discuții și amendamente pentru revizuirea comunității.
• Schița redactorului ( Proiect editorial) este o versiune preliminară a standardului după ce au fost făcute modificări de către editorii de proiect.
• proiect ( Proiectul caietului de sarcini) este prima versiune preliminară a standardului.

×
3. Forțați derularea verticală și orizontală în blocul CSS
4. Exemplu de defilare div

În acest articol, vom discuta problema creării unui bloc (div) de dimensiune fixă ​​cu posibilitatea de a derula orizontal și vertical. Acest lucru se poate face folosind CSS. Responsabil pentru asta proprietate de debordare.

Despre proprietatea de overflow utilă

Proprietate revărsare este responsabil pentru afișarea conținutului elementului bloc. Poate fi aplicat atunci când conținutul nu se potrivește complet și depășește zona blocului.

preaplin x- este responsabil pentru afișarea conținutului elementului bloc pe orizontală.
preaplin-y- este responsabil pentru afișarea conținutului elementului bloc pe verticală.

Cod CSS

Prokrutka (
preaplin: automat; /* proprietate pentru a derula orizontal. Automat dacă conținutul este mai mare decât blocul */
}

proprietăți și valori de depășire

vizibil- este afișat întregul conținut al elementului, chiar și în afara lățimii stabilite.
ascuns- este afișată doar zona din interiorul elementului, restul este ascuns.
sul- forțat să adauge o bară de defilare orizontală (y) sau orizontală (x).
auto- Adaugă automat o bară de defilare orizontală dacă blocul este mai mic.

Luați în considerare un exemplu de clasă CSS. În lățime și înălțime setăm lățimea și înălțimea blocului de care avem nevoie (conținutul blocului nu va depăși ele), iar proprietatea overflow: auto; setați derularea orizontală dacă este necesar

Cod CSS

Prokrutka (
latime: 150px; /* latimea blocului nostru */
înălțime: 100px; /* înălțimea blocului nostru */


preaplin: automat; /* proprietate pentru a derula orizontal. Automat dacă mai mult de un bloc */
}

Forțați defilarea într-un bloc CSS

De asemenea, puteți forța derularea în înălțime și lățime. Pentru a face acest lucru fiecare axă: overflow-y: scroll; (vertical) overflow-x: scroll; (orizontală) specificați parametrul de defilare, defilare forțată.

Cod HTML și CSS

Prokrutka (
înălțime: 150px; /* înălțimea blocului nostru */
fundal: #fff; /* culoare de fundal, alb */
chenar: 1px solid #C1C1C1; /* blocați dimensiunea și culoarea chenarului */


}

Exemplu de defilare div

Cod HTML și CSS

Una dintre proprietăți revărsare poate fi eliminat, apoi derularea de-a lungul unei singure axe va rămâne, ceea ce este suficient.
Vizualizați scenariul De exemplu de mai jos.