Jeg har en layout med to kolonner - en venstre div
og en høyre div
.
Den høyre div
har en grå bakgrunnsfarge
, og jeg trenger at den utvides vertikalt avhengig av høyden på brukerens nettleservindu. Akkurat nå slutter bakgrunnsfargen
ved den siste delen av innholdet i den div
.
Jeg har prøvd height:100%
, min-height:100%
, etc.
Du nevner ikke noen viktige detaljer som f.eks:
Her er en mulighet:
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>
Det er mange variasjoner på dette, avhengig av hvilke kolonner som må fikses og hvilke som er flytende. Du kan gjøre dette med absolutt posisjonering også, men jeg har generelt funnet bedre resultater (spesielt når det gjelder kryssleser) ved å bruke flyter i stedet.
Legg til min-height: 100%
og ikke spesifiser en høyde (eller sett den på automatisk). Det gjorde jobben for meg:
.container{
margin: auto;
background-color: #909090;
width: 60%;
padding: none;
min-height: 100%;
}