how to make a div display-flexible - html

Question

how should I change the following css code to make it monitor flexible with 1% distance with the footer and header.
#main {
margin: 1%;
padding: 0%;
height: 50%;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 3px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 1;
order: 1;
}
#main > aside {
margin: 4px;
padding: 5px;
border: 3px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 2;
order: 2;
}
footer {
margin-top: 1%;
background: #eebb55;
color: #000;
width: 100%;
padding-bottom: 1px;
position: absolute;
text-align: center;
bottom: 0;
left: 0;
}
<header>
<ul>
<li><b>Home</b>
</li>
<li><b>Google</b>
</li>
<li><b>Reserve</b>
</li>
</ul>
</header>
<div id='main'>
<nav>nav</nav>
<aside>aside</aside>
</div>
<footer>copyright by xxx</footer>
http://www.codeshare.io/fFS2t

Answer 1

Assuming you mean that the main div should have 1% distance to the header and footer you could use this: (Requires CSS3)
body {
margin: 0;
padding: 0;
}
#wrapper {
background: yellow;
height: 300px; /* Can be any value */
width: 100%;
}
header {
background: red;
height: 40px;
width: 100%;
}
#main {
background: green;
height: calc(100% - 80px - 2%); /* 80px = Header and footer height */
margin: 1% 0px;
width: 100%;
}
footer {
background: navy;
height: 40px;
width: 100%;
}
<div id="wrapper">
<header>
Header
</header>
<div id="main">
Main
</div>
<footer>
Footer
</footer>
</div>