如何使 div 显示灵活答案

【问题标题】：how to make a div display-flexible如何使 div 显示灵活
【发布时间】：2015-02-13 00:01:18
【问题描述】：

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

【问题讨论】：

标签： html css flexbox

【解决方案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>

【讨论】：