vincentsty vincentsty - 1 year ago 59
HTML Question

Calculate dynamic height via css

I have something as below. Theoretically, an image above and a div below. The image and the div fits into a full page, in which the div takes the remaining of the image height, in which when the content overflows the height, it can be scrollable.

Keyword: Image with dynamic height, pure css solution

And my question is: Is this possible to be done purely by css alone?

I am expecting something like this

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

enter image description here

Answer Source

You can use flex:

html, body, #outer {
  box-sizing:border-box;/* includes padding and border to size calculation */
#outer {
#image {
#inner {
  flex:1;/* will use whole space left below image if height is set an #outer */
<div id="outer">
    <img id="image" src="" />
    <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>

example with flex properties