title: how to make Two div in a line when down one height raise, up one auto smaller
body: <p>my code:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div class='a'&gt; &lt;/div&gt;
      &lt;footer&gt;&lt;/footer&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>a:</p>
  
  <pre><code>position: absolute;
  left: 0;
  bottom: 0px;
  height: 105px;
  width: 100%;
  margin: 0;
  background: #f5f5f5;
  border-top: solid 1px #afafb6;
  z-index: 900;
  </code></pre>
  
  <p>footer:</p>
  
  <pre><code>position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #F0EEEE;
  white-space: nowrap;
  </code></pre>
  
  <p>it's like this:</p>
  
  <pre><code>-----|---------|
  |   ||         |
  | a ||         |
  -----|         |
  |   ||         |
  |foo||         |
  |ter||         |
  -----|---------|
  </code></pre>
  
  <p>when footer height bigger,how to make div a's height auto smaller.</p>
  
  <p>I tought a way to set footer max-height to 60% ,and a to 40%,but if footer changes ,60% became a bit small</p>