MattHodson
Reputation: 796
Fixed bottom not working with parent having overflow
I'm wanting to have a sticky footer nav type of thing on the bottom of my first col-6 (within, not outside) the div. Problem is, it has overflow which seems to be preventing me from getting it to work. Closest I got to was it starting in the correct position, then it scrolled due to the overflow. I'm scratching my head a bit here.
PS- Sorry there's a lot of code, I added a lot of placeholders to force the overflow so it's more authentic.
.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>Upvotes: 0
Views: 52
Answers (2)
user11978918
Reputation:
.book_apt {
background-color: #ddd;
position: fixed;
padding: 2em;
left: 50%;
bottom: 8%;
transform: translateX(-50%);
width: 58%;
z-index: 1000;
}
Upvotes: 0
ciekals11
Reputation: 2155
Change position: fixed; to position: sticky; and move book_apt to the bottom of your col-6.
This should do the trick.
.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>Upvotes: 2
Related Questions
- parent & child with position fixed, parent overflow:hidden bug
- Margin bottom doesn't work with position fixed
- Fixed Element is Being Affected by overflow:hidden Parent
- How to make fixed element stop scroll on bottom of relative parent?
- Fixed position child, overflow hidden parent. Hiding bottom only
- Padding bottom caused due to overflow: auto
- css "position:fixed; overflow:auto;" bad bottom padding
- Why won't this bottom-anchored element scroll text that overflowed up?
- Bottom:0 not working when overflow-y appear
- fixed div overflows parent height