Change background-color of a body with height: 100%

I have a weird problem with my personal website. Let me explain the context:

I have some stacked sections which have to be (each one) the same height as browser window. That is, if the browser window has 500px of height and I have 5 sections, the whole website would be 500*5 = 2500px height.

If I just define my sections with height: 100% them remain 0px height. To solve that I used the next trick:

html, body {
    height: 100%;
}

This way, the container of the sections (the body) has also 100% height of the browser window, so my sections now have the desired height.

But after that, I want that the background color of the body changes depending on the section we are. This causes an strange problem. The color doesn't change in a logical way. Better see it on my website. This seems to be related with the fact that the body is actually smaller than my website. Remember, my body has 100% height (for example, 500px) and my website 100% * number of sections (2500px). But I'm not really sure about that because I tried to reproduce the error on a simple fiddle and I can't.

A curious thing is if you mouseover my website logo (which have a transition animation related with a rotation transform) the background change its color correctly. Something related with website refreshing, I suppose.

By the way, the color of the body is also changing with a transition, but you can disconnect it on the inspector if you want. That seems no to be the problem.

If you need more information please ask for it. Thank you for your help and attention.

PS: This happens on Chrome 32. In Firefox all works. So compare both browsers to understand better the problem, if you want.

Answers


I partially solved the problem with pseudoelements (then, I don't lose the semantics of my html) but I'm not satisfied because I think it has to be a better and cleaner way.

I put all the sections inside a div called "main-content" (of the website). Then I also defined this div with height: 100% (otherwise the height trick stops working). Then I define a before pseudoelement with this css:

#main-content:before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  -webkit-transition: background-color $speed;
  -moz-transition: background-color $speed;
  -o-transition: background-color $speed;
  -ms-transition: background-color $speed;
  transition: background-color $speed;
}

And then I attach to this fixed layer pseudoelement all the changing background color code, instead of using body. This works, but fixed elements and mobile browsers aren't good friends. So I think that this problem deserves a better solution.


Need Your Help

Change order of images in icon file

windows-xp icons

Is there an app that can change the order of images inside an icon?

Microservice architecture implementation of CRM HRM and Domain design problems

architecture domain-driven-design crm erp microservices

We are building a enterprise platform that consists of CRM, HRM, SALE, PROPERTY etc.