html - 页脚覆盖部分正文内容

Question

我正在处理具有页眉和页脚的页面。出于某种原因，无论我如何修改页脚 css，页脚都会覆盖部分正文内容。目前，我的CSS是

       html {
          height: 100%;
          box-sizing: border-box;
        }
        
        body {
          position: relative;
          margin: 0;
          padding-bottom: 6rem;
          min-height: 100%;
        }
        
        .navbar {
          margin-bottom: 20px;
        }
        
        .footer {
          width:100%;
          height:6%;
          position: absolute;
          right: 0;
          bottom: 0;
          left: 0;
          padding: 1rem;
          background-color: #efefef;
        }

    <footer class="footer fixed-bottom navbar-dark bg-dark">
        <div class="container">
            <p class="text-muted text-strong">Copyright (c) information and other stuff</p>
        </div>
    </footer>

有人可以告诉我如何解决这个问题吗？ 另外，一个侧面主题，但我如何调整按钮的宽度，使它们具有相同的宽度(对于撤销/授予访问按钮)。 谢谢

Answer 1

在下面的代码片段中，类 mb-5 pb-5 已添加到前面的容器中以实现所需的效果。在这种情况下不需要自定义 CSS。

mb-5 表示“margin-bottom 5 units”，pb-5 表示“padding-bottom 5 units”。

点击下面的“运行代码片段”按钮:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container mb-5 pb-5">
   <div class="row">
       <div class="col-6">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum et odio quibusdam laudantium amet, laboriosam soluta saepe dolorem ratione, iusto, illo eaque. Fuga unde, natus labore delectus laboriosam voluptatibus eligendi quod ratione soluta quos autem, fugiat ex nesciunt aliquam pariatur in, beatae, maiores sapiente cumque ipsa maxime! Velit deserunt aliquid cupiditate tempora quidem voluptatem harum. Reiciendis iusto iste mollitia, quo reprehenderit laborum unde praesentium molestias. Quibusdam incidunt officia a, ea, animi eos atque ratione facere, temporibus necessitatibus quidem iure deleniti. Cupiditate similique laboriosam perspiciatis eaque odit provident libero fugiat est dicta, praesentium voluptas amet asperiores incidunt doloribus officiis itaque! Necessitatibus libero.
       </div>
   </div>
</div>

<footer class="footer fixed-bottom navbar-dark bg-dark">
    <div class="container">
        <p class="text-muted text-strong">Copyright (c) information and other stuff</p>
    </div>
</footer>