Как сделать карты одинаковой высоты на всех экранах с нижним колонтитулом внизу?

Question

Когда я нажимаю на вкладки карты, вся страница перемещается при переключении из-за меньшей высоты.Мне удалось сделать карту одного размера, но она оставляет пустое пространство под нижним колонтитулом, и я не думаю, что это идеально подходит для экрана мобильного телефона и экрана других размеров.

Я пытался исправить положение, пытался сделать карты одного размера (это сработало бы, но я не уверен, что соотношение для других размеров экрана и нижний колонтитул не будут лежать внизу)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row d-flex align-items-stretch">

  <div class="container wholecard" id="studiocity">

    <div class="card col-8 col-lg-6 col-xl-6" style=" float: left; ">
      <div class="card-body stud" style="padding: 0; padding-top: 1em;">

        <div class="tab-content" id="myTabContent" style="">

          <div class="tab-pane fade show active" id="studhours" role="tabpanel" aria-labelledby="studhours-tab">

            <img src="http://ricktology.com/roccos/sc.jpg" class="card- 
     img-top" style="width:100%">
            <u><h4 class="card-title" style="text-align: center; font- 
     family: fugaz-one; font-style: normal; font-weight: 400; margin-bottom: 
     0;">Studio City</h4></u>
            <div class="container cheers" style="text-align: center;">
              <p class="card-text" style="font-family: 
    'fugaz-one'; font-size: 2em; color: #d40000; text-align: center; margin- 
    bottom: 0;">HAPPY HOUR</p>
              <b><span class="cardtext">EVERYDAY : 
     11am - 7pm <br> SUNDAY : 3pm-7pm 
						<br> LATE NITE : 10pm - 
     1:30am</span></b><br><br>
            </div>
          </div>

          <div class="tab-pane fade studtab" id="studlocation" role="tabpanel" aria-labelledby="studlocation-tab">


            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3302.145205107502!2d-
118.40797598529815!3d34.14262702040996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1 
!3m3!1m2!1s0x80c2bdf08bc8b0cf%3A0x15b17538f491d082!2sRocco&#39;s+Tavern!5e0!3m 
2!1sen!2sus!4v1549432245207" frameborder="0" allowfullscreen></iframe>

            <p class="cardtext" style="font-size: 12px">
              Address: 12514 Ventura BLVD <br> Studio City, CA 91604</p>
            <br><br><br>
            <p class="cardtext">Phone: 818-986-9876</p>
            <br>


          </div>

          <div class="tab-pane fade" id="studsocial" role="tabpanel" aria-labelledby="studsocial-tab">

            <p class="cardtext">Social Media</p>
            <a href="https://www.instagram.com/roccostavern"><i class="fab 
    fa-instagram btn btn"></i></a>
            <a href="http://facebook.com/roccostavern/"><i class="fab fa- 
    facebook-square btn"></i></a>
            <a href="http://twitter.com/roccostavern"><i class="fab fa- 
    twitter-square btn"></i></a><br>

            <br><br>
            <p class="cardtext">Delivery</p>

            <a href="https://www.grubhub.com/restaurant/roccos-tavern- 
     12514-ventura-blvd-los-angeles/139412">
              <input type="image" src="https://cdn6.aptoide.com/imgs/9/d/9/9d94afe3d75c9dd1ccb26191812a666f_icon 
    .png?w=256" /></a>
            <a href="https://www.ubereats.com/en-US/los-angeles/food- 
    delivery/roccos-tavern-studio-city/O0w0qVubRS-mwpMQxg3c4A/"><input type="image" src="http://blueagavemadison.com/wp- 
    content/uploads/2018/11/app-icon-a2654f7eee.png" /></a>
            <a href="https://postmates.com/merchant/roccos-tavern-studio- 
    city-2"><input type="image" src="http://ricktology.com/roccos/postmatesicon.png" /></a>
            <a href="https://www.doordash.com/store/rocco-s-tavern-los- 
    angeles-87376/"><input type="image" id="dd" src="https://apkreal.com/wp- 
    content/uploads/2017/08/DoorDash%20Order%20Manager-image.png" /></a>

            <p class="spacing;" id="spacing;"><br></p>




          </div>



          <div class="container card-footer" style="padding: 0; 
     vertical-align: bottom;">

            <ul class="nav nav-pills nav-justified" id="myTab" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" id="studhours-tab" data-toggle="tab" href="#studhours" role="tab" aria- controls="studhours" aria-selected="true">Hours</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" id="studlocation- 
     tab" data-toggle="tab" href="#studlocation" role="tab" aria- controls="studlocation" aria-selected="false">Location</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" id="studsocial-tab" data- toggle="tab" href="#studsocial" role="tab" aria-controls="studsocial" aria-selected="false">Apps</a>
              </li>
            </ul>
          </div>

        </div>
      </div>
    </div>

    <!--		<div class="hidden">-->
    <img src="http://ricktology.com/roccos/V2/pretz1.png" class=" 
     mydiv col-2 col-lg-2 col-xl-2" id="pretz">

  </div>

</div>

<br><br><br>

Я хочу, чтобы карточки плавно переключали вкладки, ничего не двигая и не меняя, кроме содержимого карточки

Answer 1

Я добавил следующий стиль в ваш CSS.

.tab-pane{
    height:359px;
}

Это должно, наконец, находиться в разделах @media, с правильными значениями пикселей в соответствии с экранами, на которые вы будете ориентироваться.

Answer 2

Я бы сказал, что flexbox и использование min-height в этом случае лучше и лучше для будущего, поскольку он будет реагировать намного лучше, чем просто установка фиксированной высоты для внутреннего содержимого, из-за неизвестного размера содержимоговаши вкладки, таким образом, ваша первоначальная проблема.

.tab-content{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  min-height: 450px;
  justify-content: center;
  align-self: center;
}

.tab-pane{
  flex: 1;
}

Вы также можете установить max-height для вашего контейнера для работы с макетом вашей страницы.