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

原文由 vincentsty 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

原文由 G-Cyrillus 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这可以使用 flexbox 来实现，如下所示：

 *{box-sizing:border-box;color:#000;font-family:sans-serif;font-size:14px;line-height:1.5em;margin:0;padding:0;}
body,html{
    height:100%;
}
body{
    display:flex;
    flex-direction:column;
}
img{
    height:auto;
    max-width:100%;
}
div{
    flex:1 1 auto;
    overflow:auto;
    padding:20px;
}
p:not(:last-child){
    margin:0 0 20px;
}

 <img src="http://placehold.it/2000x500.png/e0e0e0">
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum at nibh nec ultrices. Vestibulum gravida tincidunt mauris, vitae blandit tellus tempor vel. Nullam congue laoreet dui sit amet imperdiet. Mauris vel urna eros. In malesuada ligula sapien, ut tincidunt sem sollicitudin nec. Proin luctus viverra pellentesque. Mauris scelerisque nisl nec mauris consequat laoreet. Aliquam condimentum mattis rutrum. Nulla diam nibh, vulputate ac nunc eu, lobortis blandit risus. Etiam a metus at est commodo lacinia.</p><p>Cras cursus interdum metus, eget semper justo placerat ac. Integer suscipit eu diam dignissim lacinia. Nunc laoreet ullamcorper blandit. Vestibulum interdum, magna eget pharetra ornare, purus felis ultrices nulla, sit amet ullamcorper diam purus ut arcu. Etiam quis convallis ligula, eget sodales metus. Curabitur quis elit quam. In hac habitasse platea dictumst. Duis nec ante et urna laoreet ornare in sit amet neque. Sed fermentum vel purus et fermentum. Suspendisse maximus maximus ullamcorper. In vehicula viverra sem eget eleifend. Quisque sagittis ante eget mauris ullamcorper, eu commodo ligula consequat. Vivamus ac consectetur purus.</p><p>Sed scelerisque vestibulum purus, at ornare velit vestibulum vel. Donec sodales vel nisl non aliquam. Curabitur vitae tristique nisl. Nam scelerisque mauris at nunc cursus, vitae vestibulum quam maximus. Vivamus blandit consectetur auctor. Curabitur eros urna, vestibulum vitae efficitur nec, vehicula nec nisl. Aenean aliquam nulla at diam tristique congue. Pellentesque id sapien malesuada leo aliquam scelerisque eu sit amet libero. Fusce ornare malesuada erat, vitae eleifend purus facilisis lacinia. Integer fringilla mauris eget fringilla dictum. Nam porttitor mauris turpis, at interdum arcu ornare ac. Nam lorem orci, placerat congue velit gravida, venenatis ullamcorper neque. Donec tristique vehicula metus, ac hendrerit lacus fermentum in.</p><p>Integer nec tincidunt tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean mollis sapien quis lorem euismod dignissim. Nulla at rutrum lacus, a egestas massa. Maecenas rhoncus sed dui et feugiat. Sed a lorem est. Sed sit amet volutpat mi. Pellentesque et scelerisque magna. Praesent vel euismod elit. Nam efficitur auctor arcu, quis porta ipsum dapibus et.</p><p>Nunc volutpat dolor sed diam accumsan blandit. Praesent facilisis nisl at finibus maximus. Aenean auctor mi in tortor hendrerit, at dignissim nunc viverra. Quisque aliquet lacus sem, vel auctor massa scelerisque a. Mauris hendrerit gravida quam convallis aliquam. Nam neque velit, dapibus et ultricies at, egestas tempus tellus. Sed suscipit ante eget neque semper, non semper lectus condimentum. Fusce maximus elit vel tortor interdum, sed vehicula dui consectetur. Morbi pellentesque varius arcu eget lacinia. Curabitur maximus odio in turpis feugiat tincidunt.</p></div>

原文由 Shaggy 发布，翻译遵循 CC BY-SA 3.0 许可协议