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

---

可能是一个重复的问题，链接为http://stackoverflow.com/questions/37092692/make-a-div-to-the-bottom-of-the-page/37092851#37092851，尽管它不涉及图像。 - G-Cyrillus

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/

- G-Cyrillus

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

---

Shaggy，感谢您的回复。我认为我在问题上有些混淆了。只有“内部div”是可滚动的，而不是整个HTML页面可滚动。 - vincentsty

只需在 div 中添加 overflow:auto 即可。答案已更新以反映此更改。 - Shaggy

Answer 3

计算无法按照您尝试使用的方式工作。图像高度是可变的，而calc需要一个值来实际计算是否为百分比或像素等。

您应该能够使用Flexbox来实现此目标。

- James Tudsbury