Как создать этот тип макета без изменения размера заголовка

Question

Я хочу создать макет этого типа, вот изображение.

Что я пробовал -

вот мой HTML код -

<div class="container">
  <div class="row justify-content-center">
    <div class="col-12 col-sm-10 col-md-8 col-lg-4">
      <div class="custom-card give-space">
        <div class="header">
          <div class="logo"></div>
        </div>
        <button id="load">More</button>
        <div class="my-div">
          Some text
        </div>
      </div>
    </div>
  </div>
</div>

мой css код -

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
html{
  height: 100%;
  padding: 0;
  margin: 0;
  min-height: 100%;
}
body{
  position: relative;
  padding-top: 30px;
  padding-bottom: 50px;
  background-color: #fff;
  min-height: 100%;
  font-family: 'Lato', sans-serif;
  color: #868686;

}

/* for custom card*/
.custom-card{
  position: relative;
  background-color: #fff;
  min-height: 650px;
  padding: 20px;
  border-radius: 10px;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
  overflow: hidden;
  padding-top: 250px; /* is this ok?*/
}

.custom-card .header{
  position: absolute;
  top: -30%;
  left: -35%;
  height: 55%;
  width: 170%;
  border-radius: 100%;
  background-color: #2e71ff;
}

.logo{
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -68px;
  width: 20%;
  height: 40%;
  border-radius: 100%;
  background-color: #2e71ff;
  webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
  border: 4px solid #ffffff;
}

@media (min-width: 1200px){
  .logo {
    bottom: -50px;
    width: 20%;
    height: 32%;
  }
}
@media (min-width: 992px) and (max-width: 1200px){
  .logo {
    bottom: -48px;
    width: 20%;
    height: 28%;
  }
}
@media (max-width: 768px){
  .logo {
    bottom: -55px;
    width: 20%;
    height: 40%;
  }
}
@media (max-width: 576px){
  .logo {
    bottom: -55px;
    width: 18%;
    height: 33%;
  }
}

.my-div{
  height: 1000px;
  background-color: #ff0000;
  display: none;
}
.show{
  display: block;
}

Js код -

$('#load').click(function(){
    if($(".my-div").hasClass("show")){
    $(".my-div").removeClass("show");
  }else{
    $(".my-div").addClass("show");
  }
});

Вот код jsfiddle

Но проблема в том, что если я нажму на кнопку «больше», он покажет элемент my-div, высота которого составляет 1000 пикселей (в основном это, например, цель, так как мой Кастом-карта может увеличить ее высоту), а высота жатки также увеличить и затормозить макет. Итак, мой вопрос: как позаботиться о разделе заголовка, если custom-card увеличивает свою высоту? Еще один вопрос, set padding-top: 250px; пользовательской карты в порядке, потому что он может изменить свою высоту, и я хочу, чтобы пространство между заголовком и кнопкой загрузки больше (это может быть элемент div, который содержит некоторый текст). спасибо

Answer 1

Похоже, это решает вашу проблему с JsFiddle как минимум:

Понизьте 'my-div' до следующего div следующим образом: (потому что в данный момент он содержится в div 'custom-card', поэтому растягивает его при открытии)

<div class="container">
  <div class="row justify-content-center">
    <div class="col-12 col-sm-10 col-md-8 col-lg-4">
      <div class="custom-card give-space">
        <div class="header">
          <div class="logo"></div>
        </div>
        <button id="load">More</button>
      </div>      
      <div class="my-div">
        Some text
      </div>
    </div>
  </div>
</div>

Поместите ваш 'my-div' в абсолютное положение (добавлен дополнительный код, чтобы сделать его лучше для глаз, но это зависит от вас):

.my-div{
  height: 1000px;
  background-color: #ff0000;
  display: none;
  position: absolute;
  top: 45%;
  width: 93.5%;
  height: fit-content;
  padding: 8% 0;
}

Это исправит вашу проблему, по крайней мере, на данный момент.