issue with CSS position sticky on element with a height transition - css

Question

Please view code snippet in "full page" mode so that the problem is clear. You will see it when scrolling all the way to the bottom and hovering on the items. The footer is pushed down when hovering, which is what I want to stop from happening. Also if scrolling even further down while hovering, the footer will stay up and then the main content will be pushed up.
Basically, the problem is with the height of the nav-items pushing the rest of the content up or down. So a solution would be to get the nav-items out of the flow of the document somehow so that their height won't cause the problems. I know that would only be possible with absolute positioning or floating which is undesirable, but it's just the direction of thought.
The set height of the nav-items is only needed for the slide up transition effect, so if there was another way to achieve the slide up effect, then the height could be removed and the problem fixed. The thing is that it's the height that changes between states, and not the position.
There's a way that works in chrome but not firefox:
Add a fixed height to the nav, remove overflow:hidden from aside, and add high z-index with position:relative to footer.
Of course, I'm looking for a CSS only fix. No JavaScript ;p
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
main {
padding: 100px;
}
/* ----- aside with nav inside. ----- */
aside {
position: sticky;
bottom: 0;
overflow: hidden;
}
.nav {
display: flex;
align-items: flex-end;
}
/* ----- nav item ----- */
.nav-item {
flex: 1;
padding: 1rem;
border-top: 1px solid #dee2e6;
background: white;
text-align: center;
height: 110px;
transition: all 0.5s;
}
.nav-item:hover {
background: #17a2b8;
border-color: #17a2b8;
color: white;
height: 310px;
}
/* ----- border only between nav items ----- */
.nav-item+.nav-item {
border-left: 1px solid #dee2e6;
}
/* ----- h4 heading ----- */
.nav-item h4 {
font-size: 1rem;
}
.nav-item:hover h4 {
color: white;
}
/* ----- items inside nav-item to show only on hover ----- */
.nav-item .nav-link,
.nav-item img,
.nav-item .details {
display: none;
}
.nav-item:hover .nav-link,
.nav-item:hover img,
.nav-item:hover .details {
display: block;
}
/* ----- change <hr> color on hover ----- */
.nav-item:hover hr {
border-top-color: white;
}
/* ----- footer----- */
footer {
height: 50px;
}
/* ----- incrementally hide nav-items on smaller screens ----- */
#media (max-width: 576px) {
.nav-item:nth-child(n+4) {
display: none;
}
}
#media (max-width: 768px) {
.nav-item:nth-child(n+5) {
display: none;
}
}
#media (max-width: 992px) {
.nav-item:nth-child(n+6) {
display: none;
}
}
#media (max-width: 1200px) {
.nav-item:nth-child(n+7) {
display: none;
}
}
#media (max-width: 1370px) {
.nav-item:nth-child(n+8) {
display: none;
}
}
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolores nulla aut mollitia, repudiandae ducimus, maiores enim neque minus error inventore odio libero. Error rerum fuga maiores commodi magnam assumenda quo, dolor facilis, cupiditate
cumque atque sint eveniet omnis obcaecati natus odit est deserunt consequuntur autem? Rerum quia suscipit magni autem reiciendis exercitationem neque officia consequuntur. Asperiores, ipsum nulla sapiente autem magni possimus quod eaque fugiat incidunt
harum alias sint optio exercitationem quae minima ea totam suscipit aperiam quidem vitae veritatis? Laborum unde odit, sint, quia, quibusdam rem possimus quos quis quod ad dolore tempore adipisci eius totam. In sunt vel itaque voluptatem explicabo
a iste, odit, ipsam exercitationem earum modi. Quas aliquam nesciunt obcaecati corrupti vero esse voluptatem id fuga architecto dicta nulla sunt, placeat beatae? Placeat dolore nisi doloremque minus cupiditate optio rerum. Cum totam facilis iure?
Quaerat maxime corrupti voluptatum consequatur unde dicta ut, aliquam nobis nostrum nesciunt libero sequi perferendis error modi at ullam id possimus voluptas illo officiis culpa rerum ad molestias impedit? Laudantium nisi cumque quaerat repellendus
omnis voluptates culpa nesciunt tempora iusto mollitia commodi molestiae vitae exercitationem magnam doloremque quae in saepe temporibus quia reprehenderit, eveniet, error deserunt excepturi! Nobis consequuntur hic dolorum repudiandae perspiciatis
cupiditate eveniet inventore fuga nostrum laudantium eos quaerat sit explicabo illo magni, molestiae quis quod sed atque voluptate ipsum reiciendis minima tempora. Praesentium molestias pariatur necessitatibus est doloribus facere eaque distinctio
perferendis et aut temporibus aliquam, repellat dolorum ipsa culpa iure sit in quos dolorem minus placeat accusamus incidunt tempora? Dolor eum, praesentium velit libero necessitatibus vitae odio culpa maxime at, esse, earum sunt quam laudantium quo
unde. Dolor rem ad doloribus quis architecto, illo qui cupiditate eligendi dolorum consequuntur debitis molestiae dolore culpa dignissimos libero. Quod blanditiis quisquam iusto aut maiores! Rem facilis culpa impedit dicta perspiciatis nemo, at numquam
quam ullam reprehenderit quidem facere quia pariatur eius aperiam omnis, dignissimos suscipit optio molestiae ducimus voluptas totam. At harum dolorum pariatur praesentium velit unde perferendis quas. Odio dolorum harum at cum expedita ipsum repellendus
magnam enim quidem modi quo eveniet dolor officiis placeat cumque nihil omnis debitis illo id sequi, voluptatem iusto molestiae quod! Laborum quis deleniti animi tempora molestiae voluptatem cumque amet reiciendis esse tenetur aliquam beatae a molestias
blanditiis, alias similique earum mollitia hic velit odio vero dolores commodi? Omnis quis dolorem nesciunt iure eaque vitae dicta voluptatibus animi necessitatibus amet asperiores dolor accusantium tempora atque quia neque, adipisci esse qui? Commodi
illum hic voluptates ex! Laborum quam libero tenetur ab dolorem minus aperiam. Sit ipsum delectus dolores, ut facilis pariatur doloremque laboriosam minus odio obcaecati corrupti quidem illum. Ullam, voluptatibus illum. Dicta, reprehenderit? Corporis
iste placeat molestiae ea provident soluta labore nulla praesentium, voluptas, ut qui ratione. Illum, animi! Dolore perspiciatis minima itaque debitis iure nam fuga cumque suscipit et aperiam rem distinctio mollitia, aspernatur corrupti commodi ut
ab voluptatum est eius sapiente ad vero? Natus, optio! Delectus adipisci deserunt iusto suscipit soluta, a rem nostrum eum tenetur animi! Dolore quo culpa accusantium aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolores nulla aut mollitia, repudiandae ducimus, maiores enim neque minus error inventore odio libero. Error rerum fuga maiores commodi magnam assumenda quo, dolor facilis, cupiditate
cumque atque sint eveniet omnis obcaecati natus odit est deserunt consequuntur autem? Rerum quia suscipit magni autem reiciendis exercitationem neque officia consequuntur. Asperiores, ipsum nulla sapiente autem magni possimus quod eaque fugiat incidunt
harum alias sint optio exercitationem quae minima ea totam suscipit aperiam quidem vitae veritatis? Laborum unde odit, sint, quia, quibusdam rem possimus quos quis quod ad dolore tempore adipisci eius totam. In sunt vel itaque voluptatem explicabo
a iste, odit, ipsam exercitationem earum modi. Quas aliquam nesciunt obcaecati corrupti vero esse voluptatem id fuga architecto dicta nulla sunt, placeat beatae? Placeat dolore nisi doloremque minus cupiditate optio rerum. Cum totam facilis iure?
Quaerat maxime corrupti voluptatum consequatur unde dicta ut, aliquam nobis nostrum nesciunt libero sequi perferendis error modi at ullam id possimus voluptas illo officiis culpa rerum ad molestias impedit? Laudantium nisi cumque quaerat repellendus
omnis voluptates culpa nesciunt tempora iusto mollitia commodi molestiae vitae exercitationem magnam doloremque quae in saepe temporibus quia reprehenderit, eveniet, error deserunt excepturi! Nobis consequuntur hic dolorum repudiandae perspiciatis
cupiditate eveniet inventore fuga nostrum laudantium eos quaerat sit explicabo illo magni, molestiae quis quod sed atque voluptate ipsum reiciendis minima tempora. Praesentium molestias pariatur necessitatibus est doloribus facere eaque distinctio
perferendis et aut temporibus aliquam, repellat dolorum ipsa culpa iure sit in quos dolorem minus placeat accusamus incidunt tempora? Dolor eum, praesentium velit libero necessitatibus vitae odio culpa maxime at, esse, earum sunt quam laudantium quo
unde. Dolor rem ad doloribus quis architecto, illo qui cupiditate eligendi dolorum consequuntur debitis molestiae dolore culpa dignissimos libero. Quod blanditiis quisquam iusto aut maiores! Rem facilis culpa impedit dicta perspiciatis nemo, at numquam
quam ullam reprehenderit quidem facere quia pariatur eius aperiam omnis, dignissimos suscipit optio molestiae ducimus voluptas totam. At harum dolorum pariatur praesentium velit unde perferendis quas. Odio dolorum harum at cum expedita ipsum repellendus
magnam enim quidem modi quo eveniet dolor officiis placeat cumque nihil omnis debitis illo id sequi, voluptatem iusto molestiae quod! Laborum quis deleniti animi tempora molestiae voluptatem cumque amet reiciendis esse tenetur aliquam beatae a molestias
blanditiis, alias similique earum mollitia hic velit odio vero dolores commodi? Omnis quis dolorem nesciunt iure eaque vitae dicta voluptatibus animi necessitatibus amet asperiores dolor accusantium tempora atque quia neque, adipisci esse qui? Commodi
illum hic voluptates ex! Laborum quam libero tenetur ab dolorem minus aperiam. Sit ipsum delectus dolores, ut facilis pariatur doloremque laboriosam minus odio obcaecati corrupti quidem illum. Ullam, voluptatibus illum. Dicta, reprehenderit? Corporis
iste placeat molestiae ea provident soluta labore nulla praesentium, voluptas, ut qui ratione. Illum, animi! Dolore perspiciatis minima itaque debitis iure nam fuga cumque suscipit et aperiam rem distinctio mollitia, aspernatur corrupti commodi ut
ab voluptatum est eius sapiente ad vero? Natus, optio! Delectus adipisci deserunt iusto suscipit soluta, a rem nostrum eum tenetur animi! Dolore quo culpa accusantium aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolores nulla aut mollitia, repudiandae ducimus, maiores enim neque minus error inventore odio libero. Error rerum fuga maiores commodi magnam assumenda quo, dolor facilis, cupiditate
cumque atque sint eveniet omnis obcaecati natus odit est deserunt consequuntur autem? Rerum quia suscipit magni autem reiciendis exercitationem neque officia consequuntur. Asperiores, ipsum nulla sapiente autem magni possimus quod eaque fugiat incidunt
harum alias sint optio exercitationem quae minima ea totam suscipit aperiam quidem vitae veritatis? Laborum unde odit, sint, quia, quibusdam rem possimus quos quis quod ad dolore tempore adipisci eius totam. In sunt vel itaque voluptatem explicabo
a iste, odit, ipsam exercitationem earum modi. Quas aliquam nesciunt obcaecati corrupti vero esse voluptatem id fuga architecto dicta nulla sunt, placeat beatae? Placeat dolore nisi doloremque minus cupiditate optio rerum. Cum totam facilis iure?
Quaerat maxime corrupti voluptatum consequatur unde dicta ut, aliquam nobis nostrum nesciunt libero sequi perferendis error modi at ullam id possimus voluptas illo officiis culpa rerum ad molestias impedit? Laudantium nisi cumque quaerat repellendus
omnis voluptates culpa nesciunt tempora iusto mollitia commodi molestiae vitae exercitationem magnam doloremque quae in saepe temporibus quia reprehenderit, eveniet, error deserunt excepturi! Nobis consequuntur hic dolorum repudiandae perspiciatis
cupiditate eveniet inventore fuga nostrum laudantium eos quaerat sit explicabo illo magni, molestiae quis quod sed atque voluptate ipsum reiciendis minima tempora. Praesentium molestias pariatur necessitatibus est doloribus facere eaque distinctio
perferendis et aut temporibus aliquam, repellat dolorum ipsa culpa iure sit in quos dolorem minus placeat accusamus incidunt tempora? Dolor eum, praesentium velit libero necessitatibus vitae odio culpa maxime at, esse, earum sunt quam laudantium quo
unde. Dolor rem ad doloribus quis architecto, illo qui cupiditate eligendi dolorum consequuntur debitis molestiae dolore culpa dignissimos libero. Quod blanditiis quisquam iusto aut maiores! Rem facilis culpa impedit dicta perspiciatis nemo, at numquam
quam ullam reprehenderit quidem facere quia pariatur eius aperiam omnis, dignissimos suscipit optio molestiae ducimus voluptas totam. At harum dolorum pariatur praesentium velit unde perferendis quas. Odio dolorum harum at cum expedita ipsum repellendus
magnam enim quidem modi quo eveniet dolor officiis placeat cumque nihil omnis debitis illo id sequi, voluptatem iusto molestiae quod! Laborum quis deleniti animi tempora molestiae voluptatem cumque amet reiciendis esse tenetur aliquam beatae a molestias
blanditiis, alias similique earum mollitia hic velit odio vero dolores commodi? Omnis quis dolorem nesciunt iure eaque vitae dicta voluptatibus animi necessitatibus amet asperiores dolor accusantium tempora atque quia neque, adipisci esse qui? Commodi
illum hic voluptates ex! Laborum quam libero tenetur ab dolorem minus aperiam. Sit ipsum delectus dolores, ut facilis pariatur doloremque laboriosam minus odio obcaecati corrupti quidem illum. Ullam, voluptatibus illum. Dicta, reprehenderit? Corporis
iste placeat molestiae ea provident soluta labore nulla praesentium, voluptas, ut qui ratione. Illum, animi! Dolore perspiciatis minima itaque debitis iure nam fuga cumque suscipit et aperiam rem distinctio mollitia, aspernatur corrupti commodi ut
ab voluptatum est eius sapiente ad vero? Natus, optio! Delectus adipisci deserunt iusto suscipit soluta, a rem nostrum eum tenetur animi! Dolore quo culpa accusantium aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolores nulla aut mollitia, repudiandae ducimus, maiores enim neque minus error inventore odio libero. Error rerum fuga maiores commodi magnam assumenda quo, dolor facilis, cupiditate
cumque atque sint eveniet omnis obcaecati natus odit est deserunt consequuntur autem? Rerum quia suscipit magni autem reiciendis exercitationem neque officia consequuntur. Asperiores, ipsum nulla sapiente autem magni possimus quod eaque fugiat incidunt
harum alias sint optio exercitationem quae minima ea totam suscipit aperiam quidem vitae veritatis? Laborum unde odit, sint, quia, quibusdam rem possimus quos quis quod ad dolore tempore adipisci eius totam. In sunt vel itaque voluptatem explicabo
a iste, odit, ipsam exercitationem earum modi. Quas aliquam nesciunt obcaecati corrupti vero esse voluptatem id fuga architecto dicta nulla sunt, placeat beatae? Placeat dolore nisi doloremque minus cupiditate optio rerum. Cum totam facilis iure?
Quaerat maxime corrupti voluptatum consequatur unde dicta ut, aliquam nobis nostrum nesciunt libero sequi perferendis error modi at ullam id possimus voluptas illo officiis culpa rerum ad molestias impedit? Laudantium nisi cumque quaerat repellendus
omnis voluptates culpa nesciunt tempora iusto mollitia commodi molestiae vitae exercitationem magnam doloremque quae in saepe temporibus quia reprehenderit, eveniet, error deserunt excepturi! Nobis consequuntur hic dolorum repudiandae perspiciatis
cupiditate eveniet inventore fuga nostrum laudantium eos quaerat sit explicabo illo magni, molestiae quis quod sed atque voluptate ipsum reiciendis minima tempora. Praesentium molestias pariatur necessitatibus est doloribus facere eaque distinctio
perferendis et aut temporibus aliquam, repellat dolorum ipsa culpa iure sit in quos dolorem minus placeat accusamus incidunt tempora? Dolor eum, praesentium velit libero necessitatibus vitae odio culpa maxime at, esse, earum sunt quam laudantium quo
unde. Dolor rem ad doloribus quis architecto, illo qui cupiditate eligendi dolorum consequuntur debitis molestiae dolore culpa dignissimos libero. Quod blanditiis quisquam iusto aut maiores! Rem facilis culpa impedit dicta perspiciatis nemo, at numquam
quam ullam reprehenderit quidem facere quia pariatur eius aperiam omnis, dignissimos suscipit optio molestiae ducimus voluptas totam. At harum dolorum pariatur praesentium velit unde perferendis quas. Odio dolorum harum at cum expedita ipsum repellendus
magnam enim quidem modi quo eveniet dolor officiis placeat cumque nihil omnis debitis illo id sequi, voluptatem iusto molestiae quod! Laborum quis deleniti animi tempora molestiae voluptatem cumque amet reiciendis esse tenetur aliquam beatae a molestias
blanditiis, alias similique earum mollitia hic velit odio vero dolores commodi? Omnis quis dolorem nesciunt iure eaque vitae dicta voluptatibus animi necessitatibus amet asperiores dolor accusantium tempora atque quia neque, adipisci esse qui? Commodi
illum hic voluptates ex! Laborum quam libero tenetur ab dolorem minus aperiam. Sit ipsum delectus dolores, ut facilis pariatur doloremque laboriosam minus odio obcaecati corrupti quidem illum. Ullam, voluptatibus illum. Dicta, reprehenderit? Corporis
iste placeat molestiae ea provident soluta labore nulla praesentium, voluptas, ut qui ratione. Illum, animi! Dolore perspiciatis minima itaque debitis iure nam fuga cumque suscipit et aperiam rem distinctio mollitia, aspernatur corrupti commodi ut
ab voluptatum est eius sapiente ad vero? Natus, optio! Delectus adipisci deserunt iusto suscipit soluta, a rem nostrum eum tenetur animi! Dolore quo culpa accusantium aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolores nulla aut mollitia, repudiandae ducimus, maiores enim neque minus error inventore odio libero. Error rerum fuga maiores commodi magnam assumenda quo, dolor facilis, cupiditate
cumque atque sint eveniet omnis obcaecati natus odit est deserunt consequuntur autem? Rerum quia suscipit magni autem reiciendis exercitationem neque officia consequuntur. Asperiores, ipsum nulla sapiente autem magni possimus quod eaque fugiat incidunt
harum alias sint optio exercitationem quae minima ea totam suscipit aperiam quidem vitae veritatis? Laborum unde odit, sint, quia, quibusdam rem possimus quos quis quod ad dolore tempore adipisci eius totam. In sunt vel itaque voluptatem explicabo
a iste, odit, ipsam exercitationem earum modi. Quas aliquam nesciunt obcaecati corrupti vero esse voluptatem id fuga architecto dicta nulla sunt, placeat beatae? Placeat dolore nisi doloremque minus cupiditate optio rerum. Cum totam facilis iure?
Quaerat maxime corrupti voluptatum consequatur unde dicta ut, aliquam nobis nostrum nesciunt libero sequi perferendis error modi at ullam id possimus voluptas illo officiis culpa rerum ad molestias impedit? Laudantium nisi cumque quaerat repellendus
omnis voluptates culpa nesciunt tempora iusto mollitia commodi molestiae vitae exercitationem magnam doloremque quae in saepe temporibus quia reprehenderit, eveniet, error deserunt excepturi! Nobis consequuntur hic dolorum repudiandae perspiciatis
cupiditate eveniet inventore fuga nostrum laudantium eos quaerat sit explicabo illo magni, molestiae quis quod sed atque voluptate ipsum reiciendis minima tempora. Praesentium molestias pariatur necessitatibus est doloribus facere eaque distinctio
perferendis et aut temporibus aliquam, repellat dolorum ipsa culpa iure sit in quos dolorem minus placeat accusamus incidunt tempora? Dolor eum, praesentium velit libero necessitatibus vitae odio culpa maxime at, esse, earum sunt quam laudantium quo
unde. Dolor rem ad doloribus quis architecto, illo qui cupiditate eligendi dolorum consequuntur debitis molestiae dolore culpa dignissimos libero. Quod blanditiis quisquam iusto aut maiores! Rem facilis culpa impedit dicta perspiciatis nemo, at numquam
quam ullam reprehenderit quidem facere quia pariatur eius aperiam omnis, dignissimos suscipit optio molestiae ducimus voluptas totam. At harum dolorum pariatur praesentium velit unde perferendis quas. Odio dolorum harum at cum expedita ipsum repellendus
magnam enim quidem modi quo eveniet dolor officiis placeat cumque nihil omnis debitis illo id sequi, voluptatem iusto molestiae quod! Laborum quis deleniti animi tempora molestiae voluptatem cumque amet reiciendis esse tenetur aliquam beatae a molestias
blanditiis, alias similique earum mollitia hic velit odio vero dolores commodi? Omnis quis dolorem nesciunt iure eaque vitae dicta voluptatibus animi necessitatibus amet asperiores dolor accusantium tempora atque quia neque, adipisci esse qui? Commodi
illum hic voluptates ex! Laborum quam libero tenetur ab dolorem minus aperiam. Sit ipsum delectus dolores, ut facilis pariatur doloremque laboriosam minus odio obcaecati corrupti quidem illum. Ullam, voluptatibus illum. Dicta, reprehenderit? Corporis
iste placeat molestiae ea provident soluta labore nulla praesentium, voluptas, ut qui ratione. Illum, animi! Dolore perspiciatis minima itaque debitis iure nam fuga cumque suscipit et aperiam rem distinctio mollitia, aspernatur corrupti commodi ut
ab voluptatum est eius sapiente ad vero? Natus, optio! Delectus adipisci deserunt iusto suscipit soluta, a rem nostrum eum tenetur animi! Dolore quo culpa accusantium aliquam.</p>
</main>
<aside>
<nav class="nav">
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
</nav>
</aside>
<footer class="container-fluid bg-dark text-white py-3">
<div class="row justify-content-end">
<small class="col-4 text-center">
2018 ALL RIGHTS RESERVED.
</small>
<small class="col-4 text-right">
My Website
</small>
</div>
</footer>

Answer 1

Adding a height to nav equal to the height of nav-item when expanded basically fixes it. The change in height will be contained within nav and therefor the rest of the layout is not affected. This just leaves a big gap between main and aside, but can be easily fixed with a negative bottom margin on main.