Question

我正在使用Bootstrap，并且试图在页面底部添加页脚。我正在使用class =“ fixed-bottom”。问题是当我有很多内容页脚是重叠的内容时。我有这样的布局：

<body>
  <main class="main">
    <div class="page-loader" style="display: none;">
        <div class="page-loader__spinner">
            <svg viewBox="25 25 50 50">
                <circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
            </svg>
        </div>
    </div>
    <header class="header">          
    </header>  
    <section class="content">

            <footer class="footer fixed-bottom">
                <div class="footerProfil hidden-lg-up">
                    <p>
                        content
                    </p>
                </div>

            </footer>
    </section>
   </main>
</body>

这是我的CSS

body, html {
  background-color: #fafafa !important;
}
body {
   font-family: 'Noto Sans', sans-serif!important;
   font-size: 1rem;
   font-weight: normal;
    line-height: 1.5;
   color: #707070;
 }

.footer {
  text-align: center;
   padding-top: 4rem;
   padding-right: 1rem;
   padding-bottom: 3rem;
   padding-left: 1rem;
  }

.fixed-bottom {
   bottom: 0;
   left: 0;
}
  .content:not(.content--boxed):not(.content--full) {
     padding: 102px 30px 400px 300px;
 }
 .fixed-bottom, .fixed-top {
   position: fixed;
   right: 0;
   z-index: 1030;
 }

有人可以帮助我吗？谢谢大家

Answer 1

您需要向padding-bottom: XXpx类添加.content，其中xx-是页脚高度

固定的页脚重叠内容

1 个答案: