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.
Je vermeldt niet een paar belangrijke details zoals:
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
}
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right"></div>
</div>
</body>
</html>
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.
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%;
}