Kuidas teha div 100% kõrgus brauseri aknast

Mul on kahe veeruga paigutus - vasakpoolne div ja parempoolne div.

Paremal div on hall taustavärv ja mul on vaja, et see laieneks vertikaalselt sõltuvalt kasutaja akna kõrgusest. Praegu lõpeb taustavärv selle div sisu viimase osa juures.

Olen proovinud height:100%, min-height:100% jne.

Peter Mortensen
Redigeeritud küsimus T00 juuli 2019 в 11:32
Programmeerimine
html css height
T33 oktoober 2009 в 9:18
19 vaated

Kui te suudate oma elemendid absoluutselt paigutada,

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

teeks seda.

Ry-
Redigeeritud vastus T33 mai 2014 в 11:33
Kommentaarid (2)

Te ei maini mõningaid olulisi üksikasju, nagu:

  • Kas paigutus on fikseeritud laiusega?
  • Kas üks või mõlemad veerud on fikseeritud laiusega?

Siin on üks võimalus:

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}


  Example



  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>

Sellest on palju variante, sõltuvalt sellest, millised veerud on vaja fikseerida ja millised on vedelad. Seda saab teha ka absoluutse positsioneerimisega, kuid ma'olen üldiselt leidnud paremaid tulemusi (eriti brauserite vahel), kasutades selle asemel float'e.

Igor Ivancha
Redigeeritud vastus T11 veebruar 2016 в 12:29
Kommentaarid (0)

Lisa min-height: 100% ja ära määra kõrgust (või pane see automaatseks). See tegi minu jaoks täiesti tööd:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}
James Donnelly
Redigeeritud vastus T22 oktoober 2013 в 4:32
Kommentaarid (0)