100% height not working on child div in browser

		<div class="main-c">
 
 
 
				<div class="slide-c">
 
						<ul>
							<li><img src="" alt="temporary"></li>
							<li><img src="" alt="temporary"></li>
						</ul>
 
				</div>
 
		</div>

*{
	padding: 0;
	margin: 0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
 
.main-c{
	position: relative;
	margin: 20px auto;
	width: 80%;
	min-width: 260px;
	max-width: 800px;
	border:10px solid #fff;
	box-shadow:1px 1px 10px rgba(0,0,0,.5);
}
 
.slide-c{
	position: relative;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fa6363 url(../images/grid.png) repeat scroll 0 0;
}