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

这可以使用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>

Answer 2

您可以使用flex：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

flex属性https://jsfiddle.net/0j6xzdds/2/

的示例

Answer 3

Calc将无法按照您尝试使用它的方式运行。图像高度是可变的，calc需要一个值来实际计算是百分比还是一个像素等。

您应该可以使用Flexbox

来实现这一目标