Reputation: 8575

HTML body isn't as height as page

I have strange problem. I've a two column DIV layout and I'm setting the page's background via an background-image for the body element.

But my body-element isn't as height as my visible content. I think the problem are absolute positioned div container which grow more than the rest of the page.

How can I fix that?

Upvotes: 0

Answers (6)

sandeep

Reputation: 92803

Write like this:

html, body {
    height:100%;
}

Upvotes: 0

schlingel

Reputation: 8575

Sorry, I can't post the code for the solution because then I'd have to post the whole HTML file which is pretty big.

The problem seems to be the kind of page I'm working on: It's just one HTML site which is divided in sections. But every section would be in classical webdesign a whole page. The user switches between the sections with JS.

After removing position: relative from the growing content div, making the section height 100%, die growing content div height 100% it seems to work.

But what's still strange is why the section didn't grow as much as the div which had the dynamic sized content.

Upvotes: 0

Silviu

Reputation: 835

In your CSS file, you can use:

html{
    background: url(../images/image.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

which will resize the background image to all displays.

Upvotes: 0

David Diez

Reputation: 1223

Without code or examples my suggestion is to include a nice CSS reset for your browser. Browsers by default have a CSS "spreadsheet" and usually the body has margins.

Try this one

Upvotes: 0