0

I want make 100% height page. Items should always be equal height. I dont know how many items will be in column. If item contain img, img should fill 100% height of item.

Example for two item:

now: enter image description here

what need: enter image description here

sandbox: https://codepen.io/krosert/pen/eYJVzMK

<div class="root">
  <div class="imgWrap">
     text....
  </div>
   <div class="imgWrap blue">
     <img src="https://i.pinimg.com/originals/e2/a9/68/e2a968e625554f72e8673945be1daa33.jpg">
  </div>
</div>

body,html{
  margin: 0;
  padding: 0;
  height: 100%;
}
.root{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.imgWrap{
  background-color: #832;
  flex-grow: 1;
  flex-shrink: 0;
}

img{
  height: 100%;
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
padavan
  • 714
  • 8
  • 22

1 Answers1

1

In order to have no scroll, you can use overflow: hidden; property, if it fits the case. Also, for the columns, you can use a flex container, containing divs that have min-height and width, and no padding. Inside of each div you would have an image with height and width: 100%.

I hope this helps.

Anonymous Fox
  • 66
  • 1
  • 8
  • Also, nothing to do with the code, but I would go for a cleaner design. There is a lot of text and if you put more images this would just get worse, becoming terrible to read. Try making a longer page or putting less content, if it's possible. – Anonymous Fox Jul 04 '20 at 19:17