CODEWITHSUNDEEP
htmlcss
vincentsty
vincentsty

Reputation: 3221

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

enter image description here

Upvotes: 8

Views: 18397

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105893

You can use 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>

example with flex properties https://jsfiddle.net/0j6xzdds/2/

Upvotes: 7

Shaggy
Shaggy

Reputation: 6796

This can be achieved using flexbox, like so:

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

Upvotes: 3

James Tudsbury
James Tudsbury

Reputation: 93

Calc won't work the way you're trying to use it. The image height is variable and calc needs a value to actual calculate whether that's a percentage or a pixel etc.

You should be able to achieve this with Flexbox

Upvotes: 0

Related Questions