Question

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

＆＃13;

       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;
        }

＆＃13;

    <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>

＆＃13;

有人能指出我如何解决这个问题吗？另外，一个侧面主题，但我怎么能调整按钮的宽度，所以它们具有相同的宽度（对于撤销/授予访问按钮）。感谢

Answer 1

请根据padding身高应用body选择器的footer底部。假设您在footer height:6%;中设置了高度，因此您需要填充6％的底部，然后才能达到底部的内容。

这应该适合你：

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  padding-bottom; 6%;
}

Answer 2

在下面的代码片段中，已将类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>

Answer 3

可能更容易使页脚没有绝对定位。否则，您需要确保正文与页脚的高度padding-bottom相同。

页脚覆盖部分身体内容

3 个答案: