Hi.
I have a site which requires a sticky footer and a max-width container as well as on one page a 100vh hero. It all worked fine until i added the max-width container. Please can someone help me understand the reason why this isn’t working and a solution.
Thanks.
Working: Sticky Footer code w/ no container
Working: Sticky footer and 100vh flex hero image
Broken: I add the max-width container
https://jsfiddle.net/n8rzau36/
Any help in finding a solution would be greatly appreciated.
HTML
<div class="jack-wrap">
<main class="flex-shrink-0">
<section class="d-flex flex-column justify-content-between watermark-top-section" id="hero">
<div id="hero-top">
<nav class="navbar navbar-light navbar-expand-md">
<div class="container-fluid"><a class="navbar-brand" href="#"> </a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav mx-auto">
<li class="nav-item" role="presentation"><a class="nav-link active" href="#">Model S</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Model X</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Model 3</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Roadster </a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Energy </a></li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item" role="presentation"><a class="nav-link active" href="#">Shop </a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Sign In</a></li>
</ul>
</div>
</div>
</nav>
<h1 class="text-center aos-init aos-animate" data-aos="fade-up" data-aos-duration="700" data-aos-once="true" id="title">Tesla </h1>
<h2 class="text-center aos-init aos-animate" data-aos="fade-up" data-aos-duration="700" data-aos-once="true" id="subtitle">Roadster </h2>
</div>
<div id="hero-bottom">
<div class="container">
<div class="row">
<div class="col-8 offset-2">
<p>The quickest car in the world, with record-setting acceleration, range and performance. </p>
</div>
</div>
<div class="row">
<div class="col aos-init aos-animate" data-aos="fade-up" data-aos-delay="400">
<p class="p-top"><i class="icon ion-speedometer"></i> 1.9s </p>
<p class="p-bot">0-60 mph </p>
</div>
<div class="col with-borders aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
<p class="p-top">+250mph </p>
<p class="p-bot">Top Speed</p>
</div>
<div class="col aos-init aos-animate" data-aos="fade-up" data-aos-delay="600">
<p class="p-top">620mi </p>
<p class="p-bot">Mile Range</p>
</div>
<div class="col align-self-center aos-init aos-animate" data-aos="fade-up" data-aos-offset="100px" data-aos-delay="700"><button class="btn btn-primary btn-block reserve-button" type="button">Reserve Now</button></div>
</div>
<div class="row">
<div class="col"><button class="btn btn-link btn-block arrow-button" type="button"><i class="icon ion-ios-arrow-down"></i></button></div>
</div>
</div>
</div>
</section>
content
</main>
<footer class="footer pb-3 mt-auto watermark-footer">
<div class="container-fluid">
<div class="row text-center text-sm-left align-items-sm-center">
<div class="col-sm-3">
<p class="text-sm mb-0">im a sticky footer</p>
</div>
<div class="col-sm-9 text-right"></div>
</div>
</div>
</footer>
</div>
CSS
html, body {
height: 100%;
}
body {
display: flex !important;
flex-direction: column !important;
}
.watermark-top-section {
position: relative;
height: 100vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
.jack-wrap {
max-width: 1540px;
margin: 0 auto;
position: relative;
-webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,.1);
box-shadow: 0 0 20px 0 rgba(0,0,0,.15);
height: 100%;
}
Thanks