Cum se face un div cu înălțimea de 100% din fereastra browserului (Programare, Html, Css, Înălțime)

mike a intrebat.

Am un layout cu două coloane – una stânga div și una dreaptă div.

Coloana din dreapta div are o culoare gri background-color, , și am nevoie ca aceasta să se extindă pe verticală în funcție de înălțimea ferestrei de browser a utilizatorului. În acest moment, fereastra background-color se termină la ultima bucată de conținut din acea div.

Am încercat height:100%, , min-height:100%;, , etc.

Comentarii

  • Poate veți găsi această întrebare utilă stackoverflow.com/questions/1366548/… –  > Por Ivan Nevostruev.
  • O modalitate bună de a merge, dar se știe că unitățile vh, vw etc. sunt cunoscute pentru a fi buggy. Există această alternativă js ușoară dacă aveți nevoie de ea: joaocunha.github.io/vunit –  > Por vezi sharper.
  • Iată o explicație simplă și clară a CSS-ului height cu valori procentuale: stackoverflow.com/a/31728799/3597276 –  > Por Michael Benjamin.
  • puteți folosi height: 100vh; proprietate CSS –  > Por Vishnu Chauhan.
36 răspunsuri
James Donnelly

Există câteva unități de măsură CSS 3 numite:

Viewport-Porcentaj (sau Viewport-Relative) Lungimi

Ce sunt lungimile în procentaj de port de vedere?

Din recomandarea W3 Candidate Recommendation de mai sus:

Lungimile procentuale de vizualizare sunt relative la dimensiunea blocului inițial care îl conține. Atunci când se modifică înălțimea sau lățimea blocului inițial, acestea sunt redimensionate în mod corespunzător.

Aceste unități sunt vh (înălțimea viewportului), vw (lățimea viewportului), vmin (lungimea minimă a viewportului) și vmax (lungimea maximă a viewportului).

Cum poate fi folosit acest lucru pentru a face ca un separator să umple înălțimea browserului?

Pentru această întrebare, putem utiliza vh: 1vh este egal cu 1% din înălțimea viewportului. Altfel spus, 100vh este egal cu înălțimea ferestrei browserului, indiferent de locul în care se află elementul în arborele DOM:

HTML

<div></div>

CSS

div {
    height: 100vh;
}

Acesta este literalmente tot ce este necesar. Iată un exemplu JSFiddle de utilizare a acestui lucru.

Ce browsere acceptă aceste noi unități?

În prezent, acestea sunt acceptate pe toate browserele majore actualizate, cu excepția Opera Mini. Consultați Pot folosi… pentru asistență suplimentară.

Cum poate fi utilizat acest lucru cu mai multe coloane?

În cazul întrebării de față, care prezintă un separator stânga și unul dreapta, iată un exemplu de exemplu JSFiddle care arată un aspect cu două coloane care implică atât vh și vw.

Cum este 100vh diferit de 100%?

Să luăm ca exemplu acest aspect:

<body style="height: 100%">
    <div style="height: 200px">
        <p style="height: 100%; display: block;">Hello, world!</p>
    </div>
</body>

The p este setat la 100% înălțime, dar pentru că conține o etichetă div are o înălțime de 200 de pixeli, 100% din 200 de pixeli devine 200 de pixeli, nu 100% din body înălțime. Utilizarea 100vh în schimb înseamnă că p va avea o înălțime de 100% din înălțimea body indiferent de valoarea div înălțime. Aruncați o privire la acest lucru care însoțește JSFiddle pentru a vedea cu ușurință diferența!

Comentarii

    42

  • Comportament ciudat cu defilarea atunci când elementul este de fapt mai înalt decât viewportul. Containerul menține înălțimea viewportului, iar conținutul curge în afara containerului. min-height:100vh pare să rezolve acest lucru. –  > Por wdm.
  • @DGDD în continuare: există o mulțime de alte soluții aici care funcționează încă de la IE5, așa că nu era nevoie să repet ceea ce alții au spus deja. Acest răspuns este suficient de solid pentru majoritatea browserelor lansate în ultimii 3 ani de când a fost introdusă specificația. –  > Por James Donnelly.
  • @DGDD acest lucru funcționează pe iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 și IEMobile 10.0. Nu știu la ce browser mobil vă referiți, dar aceste 4 reprezintă peste 90% din browserele mobile utilizate. Această întrebare nu specifică o cerință pentru a lucra pe browsere mobile. –  > Por James Donnelly.
  • @robross0606 din nou, aceasta nu este întrebarea la care am răspuns aici. Este o întrebare complet diferită, al cărei răspuns folosește într-adevăr flexbox: stackoverflow.com/questions/90178/… –  > Por James Donnelly.
  • Alertă mobilă: folosirea vh încurcă cu Chrome mobil care nu ține cont de bara de navigare a acestuia. Acesta acoperă apoi partea de sus a paginii tale cu ea. O problemă serioasă dacă aveți un meniu acolo… –  > Por Offirmo.
Ariona Rian

Dacă doriți să setați înălțimea unui <div> sau orice element, trebuie să setați înălțimea lui <body> și <html> la 100%. Apoi puteți seta înălțimea elementului cu 100% 🙂

Iată un exemplu:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

Comentarii

    115

  • Corectați-mă dacă greșesc, dar cred că trebuie să setați înălțimea tuturor părinților div-ului, pentru a funcționa de fapt –  > Por Dany Y.
  • Acest lucru nu va funcționa dacă folosesc continuing design: pagina 6000px înălțime, cu blocuri reprezentând pagini. Vreau ca un bloc să fie exact înălțimea viewport-ului. –  > Por Qwerty.
  • @DanyY, aveți dreptate. Trebuie într-adevăr să setați înălțimea tuturor părinților div-ului, cu implicațiile ca totul să aibă înălțimea ecranului. Iată un exemplu exemplu. –  > Por toto_tico.
  • Acest truc funcționează pentru unele cazuri, dar nu ar funcționa și pentru alte cazuri, Dacă căutați compatibilitate sau un mod mai recomandat, puteți vedea răspunsul lui @James de mai sus 🙂 Folosind metoda procentajului de vizualizare 🙂 , Asta e ar trebui să funcționeze prea. sănătate –  > Por Ariona Rian.
  • @Qwerty, iată soluția. Setați css-ul astfel: html { height: 100%*number of blocks; }, , body { height: 100%;}, , #div { height: 100%/number of blocks; }. Deci, dacă aveți 3 secțiuni, va fi html { height: 300%; } body { height: 100%; } #div { height: 33.3% } –  > Por cameronjonesweb.
Tinister

Dacă ești capabil să îți poziționezi absolut toate elementele,

position: absolute;
top: 0;
bottom: 0;

ar face-o.

Comentarii

    18

  • Acest lucru funcționează prin scoaterea elementului din fluxul documentului și cimentarea valorii sale inferioare la înălțimea părintelui său. Acest lucru nu este ideal atunci când conținutul dvs. depășește înălțimea părintelui său. –  > Por Ricky Boyce.
  • Acest lucru nu funcționează, atunci când unul dintre părinții săi este setat la position:relative și înălțimea sa nu este de 100% din viewport. Acesta va ajusta partea de sus și de jos la următorul strămoș relativ sau absolut. –  > Por Seika85.
MrGeek

Puteți utiliza unitatea view-port în CSS:

HTML:

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
}

Comentarii

  • @Lamar Ar trebui să folosiți * { box-sizing: border-box; } pentru a împiedica acest lucru să se întâmple. –  > Por Luca Steeb.
  • Merită să verificați caniuse pentru suportul browserului privind unitățile de vizualizare: caniuse.com/#feat=viewport-units –  > Por Dave Everitt.
Alireza

Puteți utiliza vh în acest caz, care este relativ la 1% din înălțime a ferestrei de vizualizare…

Asta înseamnă că, dacă doriți să acoperiți înălțimea, utilizați pur și simplu 100vh.

Uitați-vă la imaginea de mai jos pe care o desenez pentru dumneavoastră aici:

Încearcă fragmentul pe care l-am creat pentru tine ca mai jos:

Comentarii

  • Dând 100vh a adăugat un scroll vertical pentru pagină , așa că am urmat acesta dar nu a funcționat. stackoverflow.com/questions/44645465/…. Există vreo modalitate de a evita defilarea verticală și de a avea div-ul atinge partea de jos fără niciun conținut ? –  > Por DILEEP THOMAS.
  • @DILEEPTHOMAS căutați existent paddings/margins –  > Por Legende.
  • @Legends la fișierul rădăcină am încercat să dau ca * {margin: 0, padding: 0} dar nu a funcționat –  > Por DILEEP THOMAS.
  • @DILEEPTHOMAS uitați-vă la acest exemplu de aici furnizat de Alireza, are și o bară de defilare deoarece elementul body are o marjă. Dacă eliminați marja, bara de defilare dispare. Poate avea cauze diferite, dar pe aceasta aș verifica-o mai întâi. –  > Por Legende.
Airen

Toate celelalte soluții, inclusiv cea mai votată cu vh sunt suboptime în comparație cu soluția modelul flex soluție.

Odată cu apariția modelul CSS flex, , rezolvarea problemei înălțimii de 100% devine foarte, foarte ușoară: utilizați height: 100%; display: flex pe părinte și flex: 1 pe elementele copil. Acestea vor ocupa automat tot spațiul disponibil în containerul lor.

Observați cât de simple sunt marcajul și CSS-ul. Nu există hack-uri de tabele sau altceva.

Modelul flex este acceptat de toate browserele importante precum și IE11+.

Aflați mai multe despre modelul flex aici.

Comentarii

  • un avertisment: atunci când conținutul unuia dintre containerele din stânga/dreapta depășește înălțimea inițială a corpului, containerul opus nu va fi redimensionat, astfel încât containerele vor avea înălțimi diferite. –  > Por schellmax.
  • Exemplu al problemei semnalate de Schellmax: jsfiddle.net/Arete/b4g0o3pq –  > Por Arete.
  • În funcție de proiectare, overflow-y: auto; poate evita „containerele depășesc înălțimea inițială a corpului”. –  > Por Evi Song.
cletus

Nu menționați câteva detalii importante, cum ar fi:

  • Layout-ul are lățime fixă?
  • Una sau ambele coloane au lățime fixă?

Iată o posibilitate:

Există multe variante în funcție de care coloane trebuie să fie fixe și care sunt lichide. Puteți face acest lucru și cu poziționare absolută, dar, în general, am găsit rezultate mai bune (în special în ceea ce privește cross-browser-ul) folosind în schimb float.

Majda

Aceasta este ceea ce a funcționat pentru mine:

Utilizați position:fixed în loc de position:absolute, , în acest fel, chiar dacă derulați în jos, diviziunea se va extinde până la capătul ecranului.

Comentarii

  • Acest cod cu „position: [ fixed | absolute]” este grozav pentru fundalurile pop-up-urilor (cum ar fi atunci când faceți clic pentru a mări o imagine), dar nu este atât de sigur în cazurile în care trebuie să derulați efectiv în jos. Totuși, aluat util! –  > Por Mannyfatboy.
Jonas Sandstedt

Iată o soluție pentru înălțime.

În CSS folosiți:

#your-object: height: 100vh;

Pentru browserele care nu acceptă vh-units, , folosiți modernizr.

Adăugați acest script (pentru a adăuga detecția pentru vh-units)

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

În cele din urmă utilizați această funcție pentru a adăuga înălțimea viewportului la #your-object în cazul în care browserul nu acceptă vh-units:

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});

machineghost

Chiar și cu toate răspunsurile de aici, am fost surprins să constat că niciunul nu a rezolvat cu adevărat problema. Dacă am folosit 100vh height/min-height, , aspectul se rupea atunci când conținutul era mai lung de o pagină. Dacă în schimb am folosit 100% height/min-height, , aspectul se rupea atunci când conținutul era mai mic decât înălțimea paginii.

Soluția pe care am găsit-o, care a rezolvat ambele cazuri, a fost să combin cele două răspunsuri de mai sus:

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}

Comentarii

  • Eu am o navbară cu înălțime fixă de 90px, așa că a trebuit doar să schimb „100vh” în „calc(100vh – 90px)”.  > Por Mark Jackson.
Dinesh Pandiyan

100% funcționează diferit pentru lățime și înălțime.

Atunci când specificați width: 100%, , înseamnă „ocupă 100% din lățimea disponibilă din elementul părinte sau din lățimea ferestrei”.

Atunci când specificați height: 100%, , înseamnă doar „ocupă 100% din înălțimea disponibilă de la elementul părinte”. Acest lucru înseamnă că, dacă nu specificați o înălțime la un element de nivel superior, înălțimea tuturor copiilor va fi fie 0 fie înălțimea elementului părinte, și de aceea trebuie să setați ca elementul de sus să aibă o înălțime min-height de înălțimea ferestrei.

Întotdeauna am specificat ca înălțimea minimă a corpului să fie de 100vh, ceea ce facilitează poziționarea și calculele,

body {
  min-height: 100vh;
}

lukaszkups

Încercați acest lucru – testat:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

Editare: actualizare 2020:

Puteți utiliza vh acum:

#right, #left {
  height: 100vh
}

Руслан

100vw = 100% din lățimea viewportului.

100vh = 100% din înălțimea viewportului.

Dacă doriți să setați div lățimea sau înălțimea la 100% din dimensiunea ferestrei browserului, trebuie să utilizați:

Pentru lățime: 100vw

Pentru înălțime: 100vh

Sau, dacă doriți să setați o dimensiune mai mică, utilizați CSS calc pentru a face acest lucru. Exemplu:

#example {
    width: calc(100vw - 32px)
}

Remus Simion

Adăugați min-height: 100% și nu specificați o înălțime (sau puneți-o pe auto). Pentru mine a făcut treaba în totalitate:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

EMILO

Cea mai simplă metodă este să faci așa.

Santosh Khalse

Există mai multe metode disponibile pentru setarea înălțimii unui fișier <div> la 100%.

Metoda (A):

Metoda (B) folosind vh:

Metoda (c) folosind flex box:

Testarea

Acest lucru a funcționat pentru mine:

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

Preluat din această pagină.

Mohammed Javed

Încercați să setați height:100% în html & body

html, 
body {
    height: 100%;
}

Și dacă doriți să 2 div înălțime aceeași utilizare sau setați elementul părinte display:flex proprietate.

Michael Benjamin

Elementele de bloc consumă întreaga lățime a părintelui lor, în mod implicit.

În acest fel își îndeplinesc cerința de proiectare, care este de a se suprapune pe verticală.

9.4.1 Contexte de formatare a blocurilor

Într-un context de formatare a blocurilor, casetele sunt așezate una după alta, pe verticală, începând cu partea superioară a unui bloc care le conține.

Acest comportament, însă, nu se extinde la înălțime.

În mod implicit, majoritatea elementelor au înălțimea conținutului lor (height: auto).

Spre deosebire de lățime, trebuie să specificați o înălțime dacă doriți spațiu suplimentar.

Prin urmare, țineți cont de aceste două lucruri:

  • dacă nu doriți lățime completă, trebuie să definiți lățimea unui element de bloc
  • dacă nu doriți înălțimea conținutului, trebuie să definiți înălțimea unui element

khalifeh

Folosiți doar unitatea „vh” în loc de „px”, care înseamnă înălțimea porțiunii de vizualizare.

height: 100vh;

Autocolante

Una dintre opțiuni este utilizarea tabelului CSS. Acesta are un suport mare pentru browser și funcționează chiar și în Internet Explorer 8.

Exemplu JSFiddle

newdark-it

Iată ceva care nu este exact ca ceea ce ați avut în răspunsurile anterioare, dar ar putea fi de ajutor pentru unii:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/

robross0606

Utilizați FlexBox CSS

Flexbox se potrivește perfect pentru acest tip de problemă. Deși este cunoscut mai ales pentru așezarea conținutului în direcție orizontală, Flexbox funcționează de fapt la fel de bine pentru problemele de dispunere verticală. Tot ce trebuie să faceți este să înfășurați secțiunile verticale într-un container Flex și să alegeți pe care doriți să le extindeți. Acestea vor ocupa automat tot spațiul disponibil în containerul lor.

Sunil R.

Încearcă asta o dată…

Thuc Nguyen

Puteți folosi display: flex și height: 100vh

Comentarii

  • Există deja mai multe soluții flexbox postate, inclusiv una cu această implementare exactă, postată cu doar 26 de zile înainte de acest răspuns. –  > Por TylerH.
Prabhakar Undurthi

Trebuie să faceți două lucruri, unul este să setați înălțimea la 100%, ceea ce ați făcut deja. Al doilea este să setați poziția la absolut. Asta ar trebui să rezolve problema.

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

Sursa

Comentarii

  • Soluție învechită. Utilizați vh în loc. –  > Por avalanche1.
  • Nu folosiți vh dacă intenționați să folosiți designul responsive pe dispozitivele mobile. –  > Por Alexander Kim.
ProblemChild

Încercați următorul CSS:

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

JimmyFlash

De fapt, ceea ce a funcționat cel mai bine pentru mine a fost utilizarea vh proprietate.

În aplicația mea React am vrut ca div-ul să se potrivească cu înălțimea paginii chiar și atunci când este redimensionat. Am încercat height: 100%;, , overflow-y: auto;, , dar niciuna dintre ele nu a funcționat atunci când am setat height:(your percent)vh; a funcționat așa cum era prevăzut.

Notă: dacă folosiți padding, colțuri rotunde etc., asigurați-vă că scădeți aceste valori din valoarea dvs. vh procente de proprietate sau adaugă înălțime suplimentară și face să apară bare de defilare. Iată exemplul meu:

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}

Comentarii

  • Apropo, menționați „colțuri rotunjite” care afectează înălțimea elementului dvs., mă aștept ca setarea box-sizing: border-box; ar depăși acest lucru, înseamnă că dimensiunea marginii este, de asemenea, luată în considerare atunci când se calculează dimensiunea (lățimea și înălțimea) elementului. –  > Por Neek.
RamNiwas Sharma

Comentarii

  • Posibilă greșeală de ortografie: widht (aproape de sfârșit) –  > Por Peter Mortensen.
Rudra

Această chestie va redimensiona automat înălțimea conținutului în funcție de browserul tău. Sper că va funcționa pentru tine. Încercați doar acest exemplu dat mai jos.

Trebuie să configurați doar height:100%.

John Smith Opțional

Dacă utilizați position: absolute; și jQuery, ați putea folosi

$("#mydiv").css("height", $(document).height() + "px");

Comentarii

  • Nu este nevoie de JavaScript. Soluția modernă este de a utiliza modelul CSS flex box. –  > Por Dan Dăscălescu.
  • Dacă folosiți JS, acest lucru mi s-a părut destul de util. NOTĂ: cel mai bine este să folosiți acest lucru cu $( window ).load(), deoarece veți obține rezultate diferite fiind returnate folosind F5 sau CTRL+F5. Verificați acest link pentru mai multe informații. stackoverflow.com/questions/13314058/… – user1493948
Tony Smith

Cel mai ușor:

Comentarii

  • Destul de complicat. Soluția modernă este de a utiliza modelul mult mai simplu CSS flex box. –  > Por Dan Dascalescu.
  • @DanDascalescu nu este nevoie să folosești flexbox. height:100vh; în CSS este suficient. –  > Por WebDevLearner.
WebDevLearner

O pagină completă se numește „viewport și puteți proiecta un element în funcție de viewportul său în CSS3.

Aceste unități se numesc lungimi procentuale de viewport și sunt relative la dimensiunea blocului inițial care îl conține.

  • Viewport-Height se numește vh. Înălțimea completă a unei pagini este100vh.
  • Viewport-Width se numește vw. Înălțimea completă a unei pagini este100vh.
  • Există, de asemenea, vmin (lungimea minimă a viewportului) și vmax (lungimea maximă a viewportului).

Așadar, problema dvs. poate fi rezolvată cu ușurință adăugând următoarele la CSS:

.classname-for-right-div /*You could also use an ID*/ { 
  height: 100vh;
}

Iată informații despre lungimile relative la Viewport

mohammad nazari

Puteți utiliza următorul CSS pentru a face ca un div să aibă 100% din înălțimea ferestrei browserului:

display: block;
position: relative;
bottom: 0;
height: 100%;

zurfyx

Chiar dacă această soluție este realizată cu jQuery, m-am gândit că poate fi utilă pentru oricine face coloane pentru a se adapta la dimensiunea ecranului.

Pentru coloanele care încep în partea de sus a paginii, această soluție este cea mai simplă.

body,html{
  height:100%;
}

div#right{
  height:100%
}

Pentru coloanele care sunt nu sunt încep în partea de sus a paginii (de exemplu: dacă încep sub antet).

<script>
     $(document).ready(function () {
        var column_height = $("body").height();
        column_height = column_height - 100; // 100 is the header height
        column_height = column_height + "px";
        $("#column").css("height",column_height);
    });
</script>

Prima metodă îi aplică înălțimea corpului și coloanelor, ceea ce înseamnă că este starting_pixels + height100%.

A doua metodă obține înălțimea paginii afișate utilizatorului prin obținerea înălțimii corpului și apoi scade dimensiunea antetului pentru a ști câtă înălțime a rămas pentru a afișa coloana.

Comentarii

  • Am făcut câteva modificări, dar aceasta este o modalitate excelentă de a obține div-ul să aibă dimensiunea ferestrei și funcționează bine în mod dinamic. 100% va fi redat doar o singură dată, așa că ecranele multiple nu funcționează. Aș adăuga și un $(window).resize(function() {. Arată la fel minus ceea ce am adăugat. –  > Por Rob.
  • Nu este nevoie de JavaScript. Soluția modernă este de a utiliza modelul mult mai simplu de cutie flexibilă CSS. –  > Por Dan Dăscălescu.
  • Adăugarea unei biblioteci externe precum Jquery pentru a rezolva o problemă 100% CSS nu este utilă, de asemenea, același script poate fi făcut în javascript simplu. –  > Por FranSanchis.
youcantryreachingme

Soluție stupid de ușoară care suportă cross-domeniu și, de asemenea suportă redimensionarea browserului.

<div style="height: 100vh;">
   <iframe src="..." width="100%" height="80%"></iframe>
</div>

Ajustați iframe height în funcție de necesități (lăsați valoarea div height proprietatea la 100vh).

De ce 80%? În scenariul meu din lumea reală, am un antet în interiorul div, , înainte de iframe, , care consumă ceva spațiu vertical – așa că am setat proprietatea iframe pentru a utiliza 80% în loc de 100% (altfel ar fi fost înălțimea rubricii care conține div, , dar ar începe după antet și ar depăși partea de jos a div).