De ce nu funcționează min-height pe pagina mea? (Programare, Html, Imagine De Fundal, Css)

Dave a intrebat.

Am aplicat un gradient pe fundalul elementului body. Apoi am un container (imediat după body) care are aplicată o imagine .png de fundal. Gradientul se extinde întotdeauna la cel puțin 100% din înălțimea ferestrei, dar containerul (#body2) nu o face.

Aveți vreo sugestie de ce nu funcționează acest lucru? Puteți inspecta HTML-ul de pe pagina mea web aici: http://www.savedeth.com/parlours/

Comentarii

  • Firefox, safari, chrome. –  > Por Dave.
  • Nu sunt foarte sigur, dar s-ar putea să găsiți acest întrebare foarte utilă. –  > Por dialer.
6 răspunsuri
wsanville

Specificați height: 100% pe html, body și #body2 (linia 1358).

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

Nu a fost testat în IE 6, funcționează însă în 7.

Comentarii

  • Da, funcționează pe pagina principală, dar nu și pe pagina „media” sau pe orice pagină care se extinde peste 100%. –  > Por Dave.
  • Salvator de vieți, mulțumesc! Nici măcar nu m-am gândit să pun 100% pe elementul html!?!! –  > Por jstafford.
  • Iată un alt fapt nebunesc pentru tine, tocmai testat într-un caz minim pe Chrome 30.0: Dacă creezi o pagină goală doar cu cele de mai sus, apoi adaugi un element div folosind doar min-height: 100%, care div se va întinde foarte bine până la înălțimea de body. Dacă adăugați apoi un alt div în interiorul celui dintâi și încercați min-height: 100%, nu va funcționa. Trebuie să propagați height:100% în jos prin fiecare nivel care va conține elemente copil care se așteaptă să se extindă la 100% înălțime (acesta fiind motivul pentru care stilul CSS este aplicat la atât la html și la body), în acest caz fiind vorba de elementele div direct sub body. –  > Por Inginer.
Neceros

Folosind vh în loc de % a funcționat pentru mine fără a fi nevoie să folosesc trucuri suplimentare.

Iată ce am:

html, body, .wrapper {
    min-height: 100vh;
}

În cazul în care .wrapper este clasa pe care o aplicați containerului/învelișului sau corpului principal de conținut pe care doriți să îl întindeți pe toată lungimea înălțimii ecranului.

Acest lucru va funcționa așa cum v-ați aștepta atunci când conținutul din wrapper este mai mic sau mai mare decât permite înălțimea ecranului.

Acest lucru ar trebui să funcționeze în majoritatea browserelor.

Comentarii

  • și pentru mine… În cazul meu, div-ul părinte a avut o înălțime minimă setată, de asemenea, astfel încât înălțimea minimă nu va funcționa pe div-ul copil, cu excepția cazului în care se utilizează ‘vh’ WEIRD. –  > Por Bersan.
  • rețineți că 100vh nu ia în considerare înălțimea barei de derulare, dacă există una –  > Por Emmanuel Meric de Bellefon.
Michael Copeland

Ați setat înălțimea minimă la 100%, care va fi doar la fel de înaltă ca orice element care umple spațiul. Exprimă-ți înălțimea minimă în termeni de pixeli. De asemenea, rețineți că IE6- necesită propriul set de reguli. A se vedea http://davidwalsh.name/cross-browser-css-min-height pentru mai multe detalii.

Comentarii

  • Dar am setat înălțimea minimă a tag-ului HTML și BODY la 100%, astfel încât să umple (și o face, uitați-vă la gradient) înălțimea ferestrei. –  > Por Dave.
  • Cred că efectul pe care încerci să-l obții va fi mult mai ușor dacă plasezi imaginea de fundal în tag-ul HTML and BODY. În acest caz, nu va trebui să specificați nicio înălțime. –  > Por Michael Copeland.
harris

position: absolute; funcționează în majoritatea cazurilor

Naftali aka Neal

ceva este setarea înălțimii elementului body la 320px (dacă te uiți în elementul inspect al lui chrome)

prin urmare, 100% este de 320px. de aceea se afișează doar în partea de sus a paginii cu 100% din înălțimea de 320 px.

trebuie să setați o înălțime pentru ca min-height să funcționeze.

așa că setați înălțimea @ 100% în general ar trebui să funcționeze.

Comentarii

  • Nu este adevărat. Puteți seta HTML și body la min-height: 100% pentru a umple fereastra. Deci, dacă setați următorul element la min-height:100%, acesta ar trebui să umple elementul părinte. De asemenea, cei 320px provin de la conținut, nu de la vreun css. Chrome vă arată înălțimea „afișată”, nu înălțimea setată. –  > Por Dave.
  • Uită-te la @micheal copeland. același motiv. de acolo vin cei 320px – cel mai mare element -.  > Por Naftali aka Neal.
  • Poate că întrebarea mai bună este: Cum umple fundalul BODY-ului fereastra atunci când înălțimea lui este de 320px. Avem încredere în conținut sau în fundal? –  > Por Dave.
  • după ce ai setat înălțimea minimă la 100%, se bazează pe conținut.  > Por Naftali aka Neal.
Dave

La naiba cu el. Cine nu are javascript oricum? Mai ales pentru această categorie demografică.

<script type="text/javascript">
$(document).ready(function(){
if($("body").height() < $(window).height()){
    $("body").height($(window).height());
}
});
</script>

Comentarii

  • Asta nu răspunde deloc la întrebarea „de ce”…  > Por Maël Nison.
  • 17

  • Pur și simplu nu este frumos să folosești JavaScript. Ați spus Screw it yourself, dar aceasta nu ar trebui să fie cea mai bună modalitate defacto de a face acest lucru. Nu-mi place că a primit o chestie de răspuns corect. –  > Por Lodewijk.
  • Jquery este destul de exagerat. –  > Por Crupeng.