Search code examples
cssheightfill

CSS 960 Fill page

I'm using http://960.gs/ and I want my container_12 class to fill the page.

EDIT: Fill only the height.

I tried:

.container_12{
    background-image:url(../images/background_2.png);
    background-position:center top;
    background-repeat:no-repeat;
    min-height:100%;
    height:auto;
}

but nothing happens.

Solution

  • The .container_12 class has a fixed width (you guessed it, 960px) so it's not going to fill the whole page. You want to set the background of its parent element - this can be body or a container div.

    body {
    background-image:url(../images/background_2.png);
    background-position:center top;
    background-repeat:no-repeat;
}

    Look at the style for this demo page - .container_12 has the pink/white strip background and it only takes up 960px. The blue background taking up the entire page is set on body:

    body {
  background: #123;
}

    To make the .container_12 take up the full height of the page, you need to set it's height, along with the heights of its parent elements to 100%;

    html, body {
  height: 100%;
}
.container_12 {
  height: 100%;
  background-color:#ccc;
}

    Why do you have to specify the height of the parent element? The height of .container_12 is 100%, 100% of what? It's parent element.