强制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，但您需要为height和header提供修复footer

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;