通过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

您可以使用弹性：

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/