What can I do if I only need sticky footer in one page?

I have the main page with an empty div with just a background image, so I made a sticky footer so it will not collapse, this is how it's done:

* { 
    margin:0; 
    padding:0; 
} 

html, body, #wrapper{ 
    height: 100%; 
}

body > #wrapper {
    height: 100%; 
    min-height: 100%;
}

#main { 
    padding-bottom: 40px; /* Misma altura del footer, esto es para que si el contenido crece sea el padding el que se mete por detrás del footer y no parte del contenido */
}  

#footer { 
    position: relative;
    margin-top: -40px; /* La altura del footer en negativo, para hacer que suba y no haya scroll vertical */
    height: 40px;
    clear:both;
    background: #c00;
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
      <link href="style.css" rel="stylesheet" type="text/css"/>
      <title>Plantilla 1</title>
  </head>
  <body>
<div id="wrapper">
    <div id="header">    
      Aqui va el header       
    </div><!--end header -->

    <div id="navbar">
      <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
        </ul>
    </div><!--end navbar -->

    <div id="main">
      <div id="content">
        Aqui va el contenido de la web
      </div><!--end content-->
     
      <div id="sidebar">
      </div><!--end sidebar-->
    </div><!--end main-->
</div>

<div id="footer">
  Aqui va el footer
</div>
</body>
</html>

But now I'm making another page and I need that the content push the footer beyond the browser bottom, and I can't get it to work. I'm thinking about making two different CSS stylesheets, one for the main page and one for the rest of the website, what do you think?

Thanks.

Solution

Don't give the body/html/wrapper a height but just a min-height of 100%.

html {
    height:100%;
}

body, #wrapper { 
    min-height: 100%; 
}

That way everything is allowed to grow bigger but should still make the footer appear at the bottom if there's not enough content to push it down.

The body > #wrapper part should be removed.