请在＆＃34;完整页面＆＃34;中查看代码段。模式使问题很明显。当您一直滚动到底部并悬停在项目上时，您将看到它。在悬停时，页脚被向下推，这是我想要阻止发生的事情。此外，如果在悬停时向下滚动，页脚将保持向上，然后主要内容将被推高。
基本上，问题在于导航项的高度向上或向下推动其余内容。因此，解决方案是将导航项目以某种方式从文档流中取出，以便它们的高度不会导致问题。我知道只有绝对定位或漂浮才有可能，这是不可取的，但它只是思想的方向。
导航项的设置高度仅适用于上滑过渡效果，因此如果有另一种方法可以实现上滑效果，则可以移除高度并修复问题。问题在于它是在状态之间变化的高度，而不是位置。
有一种方法适用于chrome而不是firefox：
为导航添加固定高度，删除溢出：从旁边隐藏，并添加高位z：索引位置：相对于页脚。
当然，我正在寻找仅限CSS的解决方案。没有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>
答案 0 :(得分：0)
在展开时，向nav添加等于nav-item高度的高度基本上可以修复它。高度的变化将包含在导航中，因此布局的其余部分不受影响。这只会在主要和旁边之间留下很大的差距，但可以很容易地修复主要的负底边距。