Как сделать div display-flexible

Question

Как мне изменить следующий код css, чтобы он мог быть гибким с 1% расстоянием с нижним колонтитулом и заголовком.

#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><a href="Abwasser.html"><b>Home</b></a> 
 
    </li> 
 
    <li><a href="http://www.google.com"><b>Google</b></a> 
 
    </li> 
 
    <li><a href="contact.html"><b>Reserve</b></a> 
 
    </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

Предполагая, что вы имеете в виду, что основной DIV должен иметь 1% расстояния до верхнего и нижнего колонтитулов вы могли бы использовать это: (Требуется 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>