Hogyan készítsünk egy div-et a böngészőablak 100% -os magasságában

Van egy elrendezésem két oszloppal - egy bal oldali div és egy jobb oldali div.

A jobb oldali div szürke háttérszínnel rendelkezik, és a felhasználó böngészőablakának magasságától függően függőlegesen kell bővülnie. Jelenleg a "háttérszín" a "div" utolsó tartalmánál ér véget.

Próbáltam a height:100%, min-height:100%;, stb.

Peter Mortensen
Szerkesztett kérdés 8. július 2019 в 11:32
Programozás
html css height
15. október 2009 в 9:18
21 nézetek

Ha képes vagy abszolút elhelyezni az elemeidet,

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

megtenné.

Ry-
Szerkesztett válasz 22. május 2014 в 11:33
Kommentárok (2)

Nem említ néhány fontos részletet, mint például:

  • Az elrendezés fix szélességű?
  • Az oszlopok valamelyike vagy mindkettő fix szélességű?

Itt az egyik lehetőség:

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>

Ennek sokféle változata van attól függően, hogy mely oszlopokat kell rögzíteni, és melyek a folyékonyak. Ezt abszolút pozícionálással is megteheti, de én általában jobb eredményeket találtam (különösen a böngészők közötti böngészés szempontjából) a lebegő pozícionálás helyett.

Igor Ivancha
Szerkesztett válasz 9. február 2016 в 12:29
Kommentárok (0)

Add hozzá a min-height: 100% és ne adj meg magasságot (vagy állítsd automatikusra). Nekem teljesen megoldotta a feladatot:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}
James Donnelly
Szerkesztett válasz 30. október 2013 в 4:32
Kommentárok (0)