How to make the height of all div are equal?

Question

I have been fixing my codes since last night, I cannot add more height: 100% in some class names because it just messed up the output worse.

This is my codepen -> https://codepen.io/sasddd/pen/QWKPPwg Just view this in details view so you can see the difference in spaces.

Here's my codes in PUG

.content
  section.event
    .container__content
      .event__title-container
        .title
          .title__lines
            h1.title__text EVENT
      .content__item-container.content__item-container--event
        a.content__item(href="#")
          img.content__image.content__image--event(
            src="https://i.picsum.photos/id/1022/6000/3376.jpg?hmac=FBA9Qbec8NfDlxj8xLhV9k3DQEKEc-3zxkQM-hmfcy0"
          )
          .content__wrapper.content__wrapper--event
            .content__date.content__date--event
              p.content__date-text 22 Jun, 2020
            .content__category-wrapper.content__category-wrapper--event
              p.content__title さまざまな業種や形態の体験施策に携わってきた経験値を武器に難な状...況を乗り越える さまざまな業種や形態の体験施策に携わってきた経験値を武器に難な状...況を乗り越える
              .event__title-line
                .event__description-container
                  p.content__title--event 開催日：2020年12月24日
                  p.content__title--event 開催場所：東京都 渋谷区
                  p.content__title--event カテゴリ：フリーマーケット
        a.content__item(href="#")
          img.content__image.content__image--event(
            src="https://i.picsum.photos/id/1022/6000/3376.jpg?hmac=FBA9Qbec8NfDlxj8xLhV9k3DQEKEc-3zxkQM-hmfcy0"
          )
          .content__wrapper.content__wrapper--event
            .content__date.content__date--event
              p.content__date-text 22 Jun, 2020
            .content__category-wrapper.content__category-wrapper--event
              p.content__title 宮津満腹祭 うまいもん集まれ 2020年12月24日開催
              .event__title-line
                .event__description-container
                  p.content__title--event 開催日：2020年12月24日
                  p.content__title--event 開催場所：東京都 渋谷区
                  p.content__title--event カテゴリ：フリーマーケット
        a.content__item(href="#")
          img.content__image.content__image--event(
            src="https://i.picsum.photos/id/1022/6000/3376.jpg?hmac=FBA9Qbec8NfDlxj8xLhV9k3DQEKEc-3zxkQM-hmfcy0"
          )
          .content__wrapper.content__wrapper--event
            .content__date.content__date--event
              p.content__date-text 22 Jun, 2020
            .content__category-wrapper.content__category-wrapper--event
              p.content__title 宮津満腹祭 うまいもん集まれ 2020年12月24日開催
              .event__title-line
                .event__description-container
                  p.content__title--event 開催日：2020年12月24日
                  p.content__title--event 開催場所：東京都 渋谷区
                  p.content__title--event カテゴリ：フリーマーケット
                  p.content__title--event カテゴリ：フリーマーケット

Here's my codes in SCSS

// EVENT SCSS
.event {
  position: relative;

  &__title-container {
    margin-top: 61px;
  }

  &__title-line {
    border-top: 1px solid black;
    margin-left: 6px;
    padding-left: 20px;
    height: 100%;
  }

  &__description-container {
    display: inline-block;
    border-left: 1px solid black;
    height: 100%;
  }
}

// CONTENT.SCSS
.content {
  position: relative;

  &__image {
    width: 380px;
    height: 210px;
    object-fit: cover;
    object-position: center;
    border: 5px solid white;

    &--small {
      border: 4px solid white;
      width: 278px;
      height: 156px;
    }

    &--category {
      border: 4px solid white;
      margin-top: 22px;
    }

    &--event {
      border: 4px solid white;
      height: 200px;
    }
  }

  &__item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 378px;
    color: black;
    margin: 0;

    &--small {
      width: 278px;
      margin-bottom: 31px;
    }

    &:not(:nth-child(3n + 3)) {
      margin-right: 35px;
    }

    &--category {
      // blank
    }
  }

  &__item-container {
    width: 1220px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 27px;
    height: 100%;

    &--small {
      width: 907px;
    }

    &--category {
      width: 100%;
    }

    &--event {
      width: 100%;
    }
  }

  &__date {
    position: absolute;
    margin-top: 5px;
    left: -5px;
    top: 38px;
    height: 28px;
    white-space: nowrap;
    transform: rotate(-90deg);

    &--small {
      left: -10px;
    }

    &--category {
      left: -25px;
    }

    &--event {
      top: 170px;
      left: 25px;
    }
  }

  &__date-text {
    font-size: 12px;

    &--category {
      font-size: 12px;
    }
  }

  &__wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-top: 8px;
    padding-left: 50px;

    &--category {
      padding-left: 12px;
    }

    &--event {
      justify-content: center;
      align-items: center;
      width: 100%;
      // height: 100%;
    }
  }

  &__category-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &--small {
      //blank
    }

    &--sp {
      //blank
    }

    &--event {
      display: block;
      width: 100%;
      // height: 100%;
    }
  }

  &__category-line {
    border-left: 1px solid black;
    margin-left: 6px;
    margin-top: 15px;
    padding-bottom: 5px;
    padding-right: 8px;

    &--small {
      margin-left: -5px;
    }
  }

  &__category-text {
    font-size: 16px;
    letter-spacing: 0.1em;
    padding-left: 19px;
    width: 338px;
    max-width: 100%;

    &--small {
      width: 234px;
      padding-left: 14px;
    }

    &--sidepanel {
      width: 100%;
      padding-left: 0;
      line-height: 2.25em;
    }

    &::before {
      content: " \25A0";
      padding-right: 14px;
      cursor: pointer;
    }

    &--skyblue {
      color: blue;
    }

    &--islamicgreen {
      color: green;
    }

    &--tawny {
      color: yellow;
    }

    &--purple {
      color: purple;
    }

    &--amaranth {
      color: red;
    }
  }

  &__title-line {
    border-top: 1px solid black;
    border-left: 1px solid black;
    margin-left: 6px;
    padding-right: 8px;
    padding-bottom: 21px;
    height: 100%;

    &--small {
      margin-left: -13px;
      padding-bottom: 5px;
      padding-right: 0;
    }

    &--category {
      padding-bottom: 2px;
    }

    // &--event {
    //   border-left: 1px solid $border;
    //   margin-left: 6px;
    //   padding-right: 8px;
    //   height: 100%;
    // }
  }

  &__title {
    padding-top: 21px;
    padding-left: 22px;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5em;
    width: 338px;
    max-width: 100%;
    height: 100%;

    &--small {
      padding-top: 13px;
      padding-left: 15px;
      padding-right: 8px;
      font-size: 18px;
      line-height: 1.44em;
      width: 234px;
    }

    &--sidepanel {
      font-size: 18px;
      line-height: 1.5em;
      padding-top: 0;
      padding-left: 0;
      width: 100%;
    }

    &--event {
      padding-top: 13px;
      padding-left: 15px;
      padding-right: 8px;
      font-size: 16px;
      width: 234px;
    }
  }
}

It's not clear what you're trying to achieve. You show us a mockup, butthe heights of the texts are way different in your real world exemple, so what should be aligned to what ? — Amaury Hanser, Jan 22 '21 at 08:07
I want to make the height in both text equally, I showed the psd image here, my output should be somewhat exact with that image, then my output is far away from that (as shown in my codepen). Anyways sorry for bad english. Idk how to explain it clearly. — Kirby Tan, Jan 22 '21 at 08:34

score 1 · Accepted Answer · edited Jan 22 '21 at 02:49

1

Here something that you could try:

Refer to this answer, edit class content__title to make it fixed lines.
Remove justify-content: center; align-items: center; from class content__wrapper--event to make the content not in center.

edited Jan 22 '21 at 02:49

Dharman

30,962
25
85
135

answered Jan 22 '21 at 02:44

Gellio Gao

835
6
19

Thank you!! I'll check that out. – Kirby Tan Jan 22 '21 at 08:36

score 0 · Answer 2 · answered Jan 24 '21 at 16:01

0

I just play with my codes and I created a new container and added height: 100%;. That's it!

answered Jan 24 '21 at 16:01

Kirby Tan

103
11

How to make the height of all div are equal?

2 Answers2