我想在我的第一个col-6的底部（在内部，而不是外部）使用粘性页脚导航类型的东西。问题是，它的overflow似乎使我无法正常工作。我最接近的是它从正确的位置开始，然后由于溢出而滚动了。我在这里有点挠头。
PS-抱歉，有很多代码，我添加了很多占位符来强制overflow以便更加真实。
.b-wrapper {
border-radius: 4px;
width: 90vw;
height: 90vh;
max-width: 1024px;
max-height: 768px;
}
.booking-item {
padding: 30px 15px 30px 15px;
cursor: pointer;
border-bottom: 2px solid #f5f5f5;
min-height: 30px;
}
.tts {
max-height: 650px;
overflow-y: auto;
}
.book_apt {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
/* Vertically center the text there */
background-color: #f5f5f5;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container" style="height:100vh;">
<div class="row justify-content-center h-100">
<div class="col-12 my-auto mx-auto">
<div class="card">
<div class="card-body p-0">
<div class="row">
<div class="col-6 pr-0 tts">
<div class="book_apt">
<a class="btn btn-primary" href="#">Book Service</a>
</div>
<!-- Added a lot to force the overflow -->
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
Massage Therapy (60 minutes)
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：2)
将position: fixed;更改为position: sticky;，然后将book_apt移至col-6的底部。
这应该可以解决问题。
.b-wrapper {
border-radius: 4px;
width: 90vw;
height: 90vh;
max-width: 1024px;
max-height: 768px;
}
.booking-item {
padding: 30px 15px 30px 15px;
cursor: pointer;
border-bottom: 2px solid #f5f5f5;
min-height: 30px;
}
.tts {
max-height: 650px;
overflow-y: auto;
}
.book_apt {
position: sticky;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
/* Vertically center the text there */
background-color: #f5f5f5;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container" style="height:100vh;">
<div class="row justify-content-center h-100">
<div class="col-12 my-auto mx-auto">
<div class="card">
<div class="card-body p-0">
<div class="row">
<div class="col-6 pr-0 tts">
<!-- Added a lot to force the overflow -->
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="booking-item" id="booking">
<div class="row">
<div class="col-2">
<div class="form-check my-auto">
<input class="form-check-input" type="checkbox" value="" id="test-check">
</div>
</div>
<div class="col-6 my-auto">
<h6 class="mb-0 pb-0">Swedish Massage</h6>
<small><i>30min</i></small>
</div>
<div class="col-4 my-auto text-right">
GBP £38
</div>
</div>
</div>
<div class="book_apt">
<a class="btn btn-primary" href="#">Book Service</a>
</div>
</div>
</div>
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
.book_apt {
background-color: #ddd;
position: fixed;
padding: 2em;
left: 50%;
bottom: 8%;
transform: translateX(-50%);
width: 58%;
z-index: 1000;
}