html - 通过css计算动态高度

Question

我有如下内容。理论上，上面是一个图像，下面是一个 div。图片和div组成一个完整的页面，其中div占图片剩余高度，当内容溢出高度时，可以滚动。

关键词:图片动态高度，纯css方案
我的问题是:这是否可以仅通过 css 来完成？

我期待这样的事情

<div id="outer">
    <img id="image" src="" style="width: 100%;">
    <div id="inner" style="height:calc(100% - imageHeight);"></div>
</div>

Answer 1

你可以使用 flex :

html, body, #outer {
  height:100%;
  margin:0;
  box-sizing:border-box;/* includes padding and border to size calculation */
  }
#outer {
  display:flex; 
  flex-direction:column;
  }
#image {
  width:100%;
  }
#inner {
  flex:1;/* will use whole space left below image if height is set to #outer */
  background:tomato;
  overflow:auto; 
  }

<div id="outer">
    <img id="image" src="http://dummyimage.com/400x50&text=Header_image" />
    <div id="inner" >inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/>inner <br/></div>
</div>

具有 flex 属性的示例 https://jsfiddle.net/0j6xzdds/2/