Hoe maak ik een div 100% hoogte van het browservenster

Ik heb een layout met twee kolommen - een linker div en een rechter div.

De rechter div heeft een grijze achtergrondkleur, en ik wil dat het verticaal uitzet afhankelijk van de hoogte van het browservenster van de gebruiker's. Op dit moment eindigt de achtergrondkleur bij het laatste stukje inhoud in die div.

Ik'heb height:100%, min-height:100%;, enz. geprobeerd.

Peter Mortensen
Bewerkte vraag 8ste0 juli 2019 в 11:32
Programmering
html css height
15de3 oktober 2009 в 9:18
8 views

Als je in staat bent om je elementen absoluut te plaatsen,

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

zou het doen.

Ry-
Bewerkt antwoord 22ste3 mei 2014 в 11:33
Commentaren (2)

Je vermeldt niet een paar belangrijke details zoals:

  • Is de lay-out vaste breedte?
  • Zijn een van de kolommen of beide kolommen vast van breedte?

Hier's een mogelijkheid:

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>

Er zijn vele variaties hierop, afhankelijk van welke kolommen vast moeten staan en welke vloeibaar zijn. U kunt dit ook doen met absolute positionering, maar ik've heb over het algemeen betere resultaten gevonden (met name in termen van cross-browser) met behulp van floats in plaats daarvan.

Igor Ivancha
Bewerkt antwoord 9de1 februari 2016 в 12:29
Commentaren (0)

Voeg min-height: 100% toe en geef geen hoogte op (of zet het op auto). Het deed het werk helemaal voor mij:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}
James Donnelly
Bewerkt antwoord 30ste2 oktober 2013 в 4:32
Commentaren (0)