css - 强制 div 的高度随容器一起扩展

Question

如何在不滚动页面的情况下强制 .content div 将高度扩展到 100%

HTML:

<div class="container">
    <div class="header">header</div>
    <div class="content">content</div>
    <div class="footer">footer</div>
</div>

CSS:

body , html { height:100% ; padding:0px ; margin:0px}

.container { width:50%;height:100%; background:#e0e0e0} 
.header { background-color:#ff0066 ; padding:5px 0px 5px 5px}
.content { background-color:#333;color:#fff ; padding:20px}
.footer { background-color:#ff0066 ; padding:5px 0px 5px 5px;}

JSFiddle

Answer 1

演示 - http://jsfiddle.net/wqbr78wa/2/

使用 calc 但你需要为 header 和 footer fiddle 提供修复 height

body,
html {
  height: 100%;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  width: 50%;
  height: 100%;
  background: #e0e0e0
}
.header {
  background-color: #ff0066;
  padding: 5px 0px 5px 5px;
  height: 30px;
}
.content {
  background-color: #333;
  color: #fff;
  padding: 20px;
  height: calc(100% - 60px);
}
.footer {
  background-color: #ff0066;
  padding: 5px 0px 5px 5px;
  height: 30px;
}

<div class="container">
  <div class="header">header</div>
  <div class="content">content</div>
  <div class="footer">footer</div>
</div>