Jeg har et layout med to kolonner - en venstre div
og en højre div
.
Den højre div
har en grå baggrundsfarve
, og jeg har brug for, at den udvides vertikalt afhængigt af højden på brugerens browservindue. Lige nu slutter background-color
ved det sidste stykke indhold i den div
.
Jeg har prøvet height:100%
, min-height:100%;
osv.
Du nævner ikke et par vigtige detaljer som:
Her er en mulighed:
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>
Der er mange variationer på dette, afhængigt af hvilke kolonner der skal fastgøres og hvilke der er flydende. Du kan også gøre dette med absolut positionering, men jeg har generelt fundet bedre resultater (især med hensyn til cross-browser) ved at bruge floats i stedet.
Tilføj min-height: 100%
og angiv ikke en højde (eller sæt den på auto). Det klarede helt og aldeles opgaven for mig:
.container{
margin: auto;
background-color: #909090;
width: 60%;
padding: none;
min-height: 100%;
}