当我单击卡片选项卡时，由于高度较小，整个页面在切换时都会移动。我能够将卡制作成一个完整的尺寸，但是它在页脚下方留有空白，而且我认为在移动屏幕和其他尺寸的屏幕上平移效果并不理想。
我尝试将位置固定，尝试将卡片的尺寸调整为一个尺寸（可以，但是我不确定其他屏幕尺寸的比例，页脚不会停留在底部）
<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'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>
我想让卡片无缝切换标签，只移动卡片内容而不移动或改变
答案 0 :(得分：1)
我在您的CSS中添加了以下样式。
.tab-pane{
height:359px;
}
这最终应该位于@media部分中，并根据要定位的屏幕使用适当的像素值。
答案 1 :(得分：0)
在这种情况下，我认为<ng-select
[isOpen]="isOpen"
[items]="items"
>
</ng-select>
并使用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;
}
设置为容器，以使用页面布局。