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.
Ha képes vagy abszolút elhelyezni az elemeidet,
position: absolute;
top: 0;
bottom: 0;
megtenné.
Nem említ néhány fontos részletet, mint például:
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
}
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right"></div>
</div>
</body>
</html>
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.
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%;
}