html - 如何使div显示灵活

我应该如何更改以下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

最佳答案

假设您的意思是主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>