我如何在底部有页脚的所有屏幕上制作所有相同高度的卡片？

Posted 2023-03-05

【中文标题】我如何在底部有页脚的所有屏幕上制作所有相同高度的卡片？

【英文标题】：how do i make cards all same height on all screens with footer at the bottom?

【发布时间】：2019-09-09 05:29:07

【问题描述】：

当我点击卡片标签时，由于高度较小，整个页面在切换时会移动。我能够将卡片制作成一个完整的尺寸，但它在页脚下留下了空白空间，我认为在移动设备和其他尺寸的屏幕上不能完美转换。

我已尝试固定位置，尝试将卡片设置为一种尺寸（这可行，但我不确定其他屏幕尺寸的比例，并且页脚不会停留在底部）

<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: [phone]</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>

我想让卡片无缝切换标签，除了卡片内容之外没有任何移动或更改

【问题讨论】：

我把你的代码移到了 jsfiddle 中，结果没有同样的问题。 jsfiddle.net/nh0f4xva。您可以发布一个可以复制问题的小提琴吗？

***.com/questions/35868756/… 有帮助吗？

我认为这是它的链接？我不习惯使用 Jsfiddle jsfiddle.net/0r6y2s17/1/#&togetherjs=JyvOxUTIer

@Rustyjim 这是不行的。我昨晚试过了，但它只是弄乱了标签按钮的大小和间距

查看您发布的更新小提琴，看起来不错吗？如果您看不到更改，请尝试以下 URL：jsfiddle.net/tswaumb6

【参考方案1】：

我在您的 CSS 中添加了以下样式。

.tab-pane
    height:359px;

这应该最终位于@media 部分中，并根据您要定位的屏幕具有适当的像素值。

【参考方案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 以使用您的页面布局。