CODEWITHSUNDEEP
javascripthtmlcss
MR.ABC
MR.ABC

Reputation: 4862

100% Body Height (Content is loaded dynamically)

i like to have a background all over my website. Works fine while the content static. While using javascript to extend the content, the body element don't grow over the scrolling area. My question is similar to this question: Div height 100% and expands to fit content

Note: I've used a lots of floats and can not make a fixed background div, because my website gets inaccessible.

Need to solve this somehow. Maybe with JS ?

Html, Body
{
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

Body {
  display: block;
  background: url('../Images/page-bgr-top.png') center top repeat-x,
              url('../Images/page-bgr-content.png') center top repeat-y;
}

enter image description here

Update: Nathan Lee answer helped me. My problem is that the scroll-bar move the background and all my all other centered content stays in position.

body {overflow:auto;}

Upvotes: 2

Views: 2847

Answers (3)

meyertee
meyertee

Reputation: 2271

Change height: 100% to min-height: 100%;:

html, body
{
  width: 100%;
  min-height: 100%;
  background-color: #ffffff;
}

You're telling your body to be always as high as the window, so it actually behaves that way - not expanding to fit the height of the document. With min-height you allow that to happen

See demo here: http://jsfiddle.net/meyertee/Lpgwa/

Upvotes: 1

Raver0124
Raver0124

Reputation: 522

This happens when your using float, is there any reason for using float? try removing float and add display: block; OR display: inline-block?

Upvotes: 0

Nitesh
Nitesh

Reputation: 15749

Add overflow:auto; to your body.

body {overflow:auto;}

Hope this helps.

Upvotes: 3

Related Questions