Hi,
Welcome to Sitepoint 
Please first read the CSS faq on 100% height and the CSS faq on a sticky footer (see my sig) which will explain the obstacles that you need to overcome and then once you have digested them come back here and post your queries (if you still have them) along full html and css.
I’ll quickly point out a few quick flaws in your logic in that little snippet you posted.
border-top:solid 1px #ccc;
border-left:solid 1px #ccc;
border-right:solid 1px #ccc;
margin-top:15px;
padding:15px;
height: 100%;
So here we have a div that (may be) a minmum of 100% high but you have also added 15px padding and a top border. Therefore assuming the min-height is working (more of this in a minute) then you now have an element that is 100% + 30px + 1px tall. So to start with you have an element that can never fit into the required space because 100% is a s big as it gets and therefore the contetn will be taller than the space you want it to occupy.
This code:
#page #central {
You can’t apply min-height in percentages to an element unless the parent element has a fixed height (i.e. a height that is not dictated by its content and not one that is height auto or only defined by min-height). That means that #page must be height:100% (assuming its parent follows the same rules above) and therefore the layout would be limited to 100% height and wouldn’t be allowed to grow with content.
Specifying a 100% height on an element that isn’t the first element on the page will also mean that the element will be too big because it will be 100% tall from where it starts on the page.
This code fails in IE7:
height:auto !important;
height: 100%;
min-height:100%;
IE7 doesn’t like that construct and does weird things so separate the rules as only ie6 doesn’t understand the min-height:
e.g.
html, body {
height:100%;
margin:0;
padding:0;
}
#outer {min-height:100%}
* html #outer { height:100% }/* ie6*/
It’s actually less code anyway so its a no brainer.
If you wnat a 100% element and it needs border all around then you have to be creative and you have to start from top to bottom and use the rules I have set out above. With a little creativity you can end up with something like this:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
html, body {
height:100%;/* needed to base 100% height on something known*/
text-align:center;
margin:0;
padding:0;
}
h1, h2, p { padding:0 10px; }
#outer {
width:660px;
background:#ffc;
margin:auto;
min-height:100%;
margin-top:-10px;/*footer height - this drags the outer 40px up through the top of the monitor */
text-align:left;
clear:both;
border:5px solid #000;
}
* html #outer { height:100% }
#header {
background:red;
border-top:10px solid #000; /* soak up negative margin and allows header to start at top of page*/
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
#outer:after {/* thank you Erik J - instead of using display table for ie8*/
clear:both;
display:block;
height:1%;
content:" ";
}
</style>
</head>
<body>
<div id="outer">
<div id="header">
<h1>100% with border</h1>
</div>
<p>test</p>
<p>test</p>
</div>
</body>
</html>
If you want the element to start some way down the page and then go to the bottom you could use the same approach but just rub out the background at the top with a background colour on the elements at the top. There are other methods of creating borders and backgrounds that start from some way down the page a go to the bottom but they are quite complex.