Cu aspectul bloc, este adesea necesar faceți înălțimea blocului div la 100%. Prin simpla indicatie inaltime=100% V div nu veți putea obține rezultatul dorit, așa că există o anumită tehnică, despre care voi vorbi în acest articol.

Înainte de a prezenta codul, voi explica cum funcționează. Esența sa este de a indica înălțime=100% pentru toate blocurile părinte, inclusiv html. De exemplu, acest cod vă permite să faceți div cu înălțimea 100%:

Drept urmare, ambele div-urile vor avea 100% înălțime. Vă rugăm să rețineți că dacă eliminați inaltime html 100%, atunci nu va ieși nimic din asta. La fel, dacă partea de sus div pune deoparte inaltime 100%, și lăsați-o pe cea internă, apoi cea internă nu va fi cu 100% înălţime. Adică, amintiți-vă faceți un div cu 100% înălțime, trebuie să faceți fiecare bloc părinte cu 100% înălțime.

Dacă aveți întrebări sau doriți să comentați acest articol, vă puteți lăsa comentariul în partea de jos a paginii.

Comentarii (6):

03.05.2013 20:37:02

Mihail, am făcut-o ca și tine, dar când alungești blocul central, blocul din dreapta nu crește

Răspuns

03.05.2013 21:55:51

Mahail! Am încercat metoda propusă - funcționează, dar cu avertismentul că blocurile div la care este setată înălțimea la 100% nu ar trebui să fie mai mari decât fereastra browserului. Dacă blocul nu se încadrează în înălțime în fereastra browserului, atunci blocul nu va fi colorat complet cu culoarea de fundal. Doar acea parte a blocului care se potrivește în fereastra browserului va fi colorată cu culoarea de fundal. Iată un exemplu de cod.

stil text css (4)

Fără conținut, înălțimea nu contează pentru calculele procentuale. Cu toate acestea, lățimea va lua un procent din DOM dacă nu este specificat niciun părinte. (Folosind exemplul dvs.) Plasarea celui de-al doilea div în primul div ar obține rezultatul... exemplu de mai jos...

Al doilea div va fi de 30% din înălțimea primului div.

De ce nu funcționează valoarea procentuală pentru înălțime, ci valoarea procentuală pentru lățime?

Lățimea #working este de 80% din fereastra de vizualizare, dar înălțimea #not-working se termină la 0.

Trebuie să-i oferi un recipient cu înălțime. width folosește fereastra ca lățime implicită

O altă opțiune este să adăugați stil la div

Și aceasta înseamnă că elementul este poziționat în raport cu strămoșul său cel mai apropiat.

Valoarea procentuală din proprietatea înălțime are o ușoară complicație, iar proprietățile de lățime și înălțime se comportă de fapt diferit una față de alta. Lasă-mă să te duc într-un tur al specificațiilor.

înălţime:

conținând generate bloc. Dacă înălțimea blocului care conține nu este specificată în mod explicit (adică depinde de înălțimea conținutului) și acel element nu este poziționat în mod absolut, valoarea este calculată la „auto”. Înălțimea procentuală pe elementul rădăcină în raport cu bloc conţinând iniţial. Notă. Pentru elementele poziționate absolut care conțin un bloc pe baza unui element la nivel de bloc, procentul este calculat în raport cu înălțimea umpluturii elementului respectiv.

Bine, hai să o facem pas cu pas:

Procentul se calculează raportat la înălțimea blocului, conținând generate bloc .

Procentul este calculat pe baza lățimii blocului generat.

Aruncă o privire la aceste exemple familiare, reluate de la precedentul pentru a schimba lățimea în loc de înălțime:

• 50% lățime:200px 200 pixeli - 100 pixeli în cazul #cc
• 50% lățime:auto reprezintă 50% din orice lățime:auto ajunge, spre deosebire de înălțime, nu există o regulă specială care să trateze acest caz în mod diferit.

Acum iată partea dificilă: auto înseamnă lucruri diferite, în funcție de dacă a fost specificat pentru lățime sau înălțime! Pentru înălțime, aceasta înseamnă pur și simplu înălțimea necesară pentru a se potrivi conținutului*, dar pentru lățime automată este de fapt mai complicat. Puteți vedea din fragmentul de cod că în acest caz s-a dovedit a fi lățimea ferestrei de vizualizare.

Lățimea depinde de valorile altor proprietăți. Vezi secțiunile de mai jos.

Uau, asta nu este de ajutor. Pentru a vă scuti de probleme, v-am găsit secțiunea relevantă în cazul nostru de utilizare, intitulată „Calculul lățimilor și marginilor”, subtitrat „elementele la nivel de bloc, imuabile în flux normal”:

Valorile utilizate pentru alte proprietăți trebuie să includă următoarele restricții:

"margin-left" + "border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width" + "margin-right" = lățimea blocului care îl conține

OK, deci lățimea plus limitele corespunzătoare, limitele și limitele de umplutură trebuie să se adună la lățimea blocului care o conține (și Nu descendenți, cum funcționează înălțimea). O alta sugestie:

Dacă „lățimea” este setată la „auto”, orice alte valori „automat” devin „0”, iar „lățimea” rezultă din egalitatea rezultată.

Da! Deci, în acest caz, 50% width:auto este 50% din fereastra de vizualizare. Sper că totul are în sfârșit sens acum!

*Cel puțin atât cât contează în acest caz. spec Bine, acum totul are sens.

Descriere

Setează înălțimea maximă a unui element. Valoarea înălțimii elementului va fi calculată în funcție de valorile proprietăților înălțimii, înălțimii maxime și înălțimii minime care sunt setate. În tabel Figura 1 arată ce ghidează browserul atunci când partajează aceste proprietăți de stil.

Datele din tabel trebuie înțelese după cum urmează. Dacă valoarea înălțimii este mai mare decât valoarea maximă, atunci se presupune că înălțimea elementului este egală cu valoarea maximă.

Sintaxă

max-inaltime: valoare | interes | niciunul | moşteni

Valori

Valorile acceptate sunt pixeli (px), procente (%) și alte unități de măsură acceptate în CSS. Valorile negative nu sunt permise.

Niciunul Dezactivează această proprietate. inherit Moștenește valoarea părintelui.

HTML5 CSS2.1 IE Cr Op Sa Fx

Rezultatul acestui exemplu este prezentat în Fig. 1.

Orez. 1. Rezultatul utilizării proprietății max-height

Model de obiect

document.getElementById("elementID").style.maxHeight

Browsere

Versiunile de Internet Explorer până la 7.0 inclusiv nu acceptă valoarea de moștenire.