There is such a block: codepen.io/Nikulio/pen/mAZKoO

In theory, the block is stretched to the height of the image, but this height is not given div.box_text . You can give him a fixed height, but this is a crutch. What do you advise to do?

Question: How to give div.box_text the same height as div.box_img ?

  • use display: table or display: flex - soledar10

1 answer 1

Option 1 to apply flex :

 section.boxes { ... div.box { ... display: flex; align-items: stretch; align-content: stretch; justify-content: center; div.box_text { .... //height: 100%; убрать высоту } } ... }

Option 2 table :

 section.boxes { ... div.box { ... display: table; height: 100%; div.box_text { ... display: table-cell; height: 100%; } } ... }

... you can still apply options with position: absolute; (as a last resort, like a crutch).

  • Option with JS exactly disappears?) - Nikita Shchypylov
  • @ Nikita Schipilov, if you want so, you can and js) - HamSter
  • Regarding your advice, the table is definitely not, but flex ... is your attitude to this technology? How is the support on the phones? - Nikita Shchypylov
  • caniuse.com/#feat=flexbox - HamSter
  • another option with 100vh - forgot - user33274